From 3f331b53db3627a7e3aefddd97127b760ea4ab3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 4 Dec 2024 14:57:28 +0200
Subject: [PATCH] proper highlight

---
 .../settings_modal/tabs/appearance_tab.js           | 13 +++++++------
 .../settings_modal/tabs/appearance_tab.vue          |  4 ++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index d910c79b..9a7803ce 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/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 === theme
+      return key === (this.mergedConfig.theme || this.$store.state.instance.theme)
     },
     isStyleActive (key) {
-      const { style } = this.mergedConfig
-      return key === style
+      return key === (this.mergedConfig.style || this.$store.state.instance.style)
     },
     isPaletteActive (key) {
-      const { palette } = this.mergedConfig
-      return key === palette
+      return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
     },
     setStyle (name) {
       this.$store.dispatch('setStyle', name)
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index be05fae0..a6a84ba2 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/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">