proper highlight

src/components/settings_modal/tabs/appearance_tab.js

@@ -27,6 +27,10 @@ import {
 
 import Preview from './theme_tab/theme_preview.vue'
 
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
 library.add(
   faGlobe
 )
@@ -317,16 +321,13 @@ const AppearanceTab = {
       }
     },
     isThemeActive (key) {
-      const { theme } = this.mergedConfig
+      return key === (this.mergedConfig.theme || this.$store.state.instance.theme)
-      return key === theme
     },
     isStyleActive (key) {
-      const { style } = this.mergedConfig
+      return key === (this.mergedConfig.style || this.$store.state.instance.style)
-      return key === style
     },
     isPaletteActive (key) {
-      const { palette } = this.mergedConfig
+      return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
-      return key === palette
     },
     setStyle (name) {
       this.$store.dispatch('setStyle', name)

src/components/settings_modal/tabs/appearance_tab.vue

@@ -54,7 +54,7 @@
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
-          :class="{ toggled: isThemeActive(style.key) }"
+          :class="{ toggled: isStyleActive(style.key) }"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
@@ -114,7 +114,7 @@
               v-for="p in stylePalettes || []"
               :key="p.name"
               class="btn button-default palette-entry"
-              :class="{ toggled: isPaletteActive(p.key) }"
+              :class="{ toggled: isPaletteActive('style.' + p.key) }"
               @click="() => setPaletteCustom(p)"
             >
               <div class="palette-label">