JS - Same recurring statements in if-else

Question

I have this watcher in my app.vue that makes sure the right theme attribute is set on the html tag. I have a nested if/else loop, and as you can see in the code below I have two different conditions but two times the same statements.

Is there some way to code this is a more reusable way? I can imagine in some cases there are going to be more conditions with maybe the same statements.

  created() {
    const media = window.matchMedia("(prefers-color-scheme: dark)");

    this.$store.watch(
      (state) => {
        return state.settings.colorSettings.automatic;
      },
      (currentAutomaticValue) => {
        if (currentAutomaticValue) {
          media.addEventListener("change", this.setTheme);

          window.matchMedia &&
          window.matchMedia("(prefers-color-scheme: dark)").matches
            ? setThemeAttribute(themes.dark) // 1
            : setThemeAttribute(themes.default); // 2
        } else {
          media.removeEventListener("change", this.setTheme);

          this.colorSettings.darkMode
            ? setThemeAttribute(themes.dark) // 1
            : setThemeAttribute(themes.default); // 2
        }
      },
      { immediate: true }
    );
  },

Answer 1

So you have a boolean, and from this boolean you go with either themes.dark or themes.default. Easy, extract a method that takes a boolean and properly calls setThemeAttribute.

function setThemeBoolean(bool) {
    setThemeAttribute(bool ? themes.dark : themes.default);
}
...
if (currentAutomaticValue) {
    media.addEventListener("change", this.setTheme);
    setThemeBoolean(window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches);
} else {
    media.removeEventListener("change", this.setTheme);
    setThemeBoolean(this.colorSettings.darkMode);
}