diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index d910c79b7..7ea4a09ad 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
 )
@@ -137,11 +141,12 @@ const AppearanceTab = {
             cOrange = '#E3FF00'
           ] = v
           palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
-          this.bundledPalettes.push()
         } else {
           palette = { key, ...v }
         }
-        this.bundledPalettes.push(palette)
+        if (!palette.key.startsWith('style.')) {
+          this.bundledPalettes.push(palette)
+        }
       }))
     })
 
@@ -210,6 +215,7 @@ const AppearanceTab = {
 
           const result = {
             name: `${meta.directives.name || this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
+            key: `style.${variant.toLowerCase().replace(/ /g, '_')}`,
             bg,
             fg,
             text,
@@ -317,16 +323,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 be05fae09..d8d3ff158 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 -->
@@ -115,7 +115,7 @@
               :key="p.name"
               class="btn button-default palette-entry"
               :class="{ toggled: isPaletteActive(p.key) }"
-              @click="() => setPaletteCustom(p)"
+              @click="() => setPalette(p.key, p)"
             >
               <div class="palette-label">
                 <label>
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 130ab0969..442b482a0 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -13,6 +13,7 @@ const defaultState = {
   themeVersion: 'v3',
   styleNameUsed: null,
   styleDataUsed: null,
+  useStylePalette: false, // hack for applying styles from appearance tab
   paletteNameUsed: null,
   paletteDataUsed: null,
   themeNameUsed: null,
@@ -265,23 +266,29 @@ const interfaceMod = {
         return Promise.resolve({})
       }
     },
-    setStyle ({ dispatch, commit }, value) {
+    setStyle ({ dispatch, commit, state }, value) {
       dispatch('resetThemeV3')
       dispatch('resetThemeV2')
       dispatch('resetThemeV3Palette')
 
       commit('setOption', { name: 'style', value })
+      state.useStylePalette = true
 
-      dispatch('applyTheme', { recompile: true })
+      dispatch('applyTheme', { recompile: true }).then(() => {
+        state.useStylePalette = false
+      })
     },
-    setStyleCustom ({ dispatch, commit }, value) {
+    setStyleCustom ({ dispatch, commit, state }, value) {
       dispatch('resetThemeV3')
       dispatch('resetThemeV2')
       dispatch('resetThemeV3Palette')
 
       commit('setOption', { name: 'styleCustomData', value })
 
-      dispatch('applyTheme', { recompile: true })
+      state.useStylePalette = true
+      dispatch('applyTheme', { recompile: true }).then(() => {
+        state.useStylePalette = false
+      })
     },
     async fetchThemesIndex ({ commit, state }) {
       try {
@@ -475,7 +482,7 @@ const interfaceMod = {
             return { name: x.variant, ...cleanDirectives }
           })
           .forEach(palette => {
-            const key = 'style.' + palette.name.toLowerCase().replace(/ /, '_')
+            const key = 'style.' + palette.name.toLowerCase().replace(/ /g, '_')
             if (!firstStylePaletteName) firstStylePaletteName = key
             palettesIndex[key] = () => Promise.resolve(palette)
           })
@@ -484,9 +491,13 @@ const interfaceMod = {
           'palette',
           palettesIndex,
           userPaletteCustomData,
-          userPaletteName || firstStylePaletteName || instancePaletteName
+          state.useStylePalette ? firstStylePaletteName : (userPaletteName || instancePaletteName)
         )
 
+        if (state.useStylePalette) {
+          commit('setOption', { name: 'palette', value: firstStylePaletteName })
+        }
+
         state.paletteNameUsed = palette.nameUsed
         state.paletteDataUsed = palette.dataUsed