theme/style/palette seem to be working

src/components/settings_modal/tabs/appearance_tab.js

@@ -281,7 +281,7 @@ const AppearanceTab = {
     },
     instanceWallpaperUsed() {
       return (
-        useInstanceStore().background &&
+        this.instanceWallpaper &&
         !this.$store.state.users.currentUser.background_image
       )
     },
@@ -312,9 +312,9 @@ const AppearanceTab = {
     },
     onImport(parsed, filename) {
       if (filename.endsWith('.json')) {
-        useInterfaceStore().setThemeCustom(parsed.source || parsed.theme)
+        this.setThemeCustom(parsed.source || parsed.theme)
       } else if (filename.endsWith('.iss')) {
-        useInterfaceStore().setStyleCustom(parsed)
+        this.setStyleCustom(parsed)
       }
     },
     onImportFailure(result) {
@@ -336,25 +336,42 @@ const AppearanceTab = {
       }
     },
     isThemeActive(key) {
-      return key === (this.mergedConfig.theme || useInstanceStore().theme)
+      return (
+        key ===
+        (useSyncConfigStore().mergedConfig.theme)
+      )
     },
     isStyleActive(key) {
-      return key === (this.mergedConfig.style || useInstanceStore().style)
+      return (
+        key ===
+        (useSyncConfigStore().mergedConfig.style)
+      )
     },
     isPaletteActive(key) {
-      return key === (this.mergedConfig.palette || useInstanceStore().palette)
+      return (
+        key ===
+        (useSyncConfigStore().mergedConfig.palette ||
+          useInstanceStore().palette)
+      )
     },
-    ...mapActions(useInterfaceStore, ['setStyle', 'setTheme']),
-    setPalette(name, data) {
-      useInterfaceStore().setPalette(name)
+    ...mapActions(useInterfaceStore, [
+      'setStyle',
+      'setStyleCustom',
+      'setPalette',
+      'setPaletteCustom',
+      'setTheme',
+      'setThemeCustom',
+    ]),
+    setLocalPalette(name, data) {
+      this.setPalette(name)
       this.userPalette = data
     },
-    setPaletteCustom(data) {
-      useInterfaceStore().setPaletteCustom(data)
+    setLocalPaletteCustom(data) {
+      this.setPaletteCustom(data)
       this.userPalette = data
     },
     resetTheming() {
-      useInterfaceStore().setStyle('stock')
+      this.setStyle('stock')
     },
     previewTheme(key, version, input) {
       let theme3

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), disabled: switchInProgress }"
+          :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
           :disabled="switchInProgress"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
         >
@@ -90,7 +90,7 @@
               class="btn button-default palette-entry"
               :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
               :disabled="switchInProgress"
-              @click="() => setPalette(p.key, p)"
+              @click="() => setLocalPalette(p.key, p)"
             >
               <div class="palette-label">
                 <label>
@@ -113,7 +113,7 @@
               class="btn button-default palette-entry"
               :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
               :disabled="switchInProgress"
-              @click="() => setPalette(p.key, p)"
+              @click="() => setLocalPalette(p.key, p)"
             >
               <div class="palette-label">
                 <label>
@@ -143,7 +143,7 @@
               :compact="true"
               :apply="true"
               :disabled="switchInProgress"
-              @apply-palette="data => setPaletteCustom(data)"
+              @apply-palette="data => setLocalPaletteCustom(data)"
             />
           </template>
           <template v-else-if="customThemeVersion === 'v2'">