src/components/settings_modal/tabs/appearance_tab.js

@@ -27,10 +27,6 @@ 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
 )
@@ -141,12 +137,11 @@ const AppearanceTab = {
             cOrange = '#E3FF00'
           ] = v
           palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+          this.bundledPalettes.push()
         } else {
           palette = { key, ...v }
         }
-        if (!palette.key.startsWith('style.')) {
         this.bundledPalettes.push(palette)
-        }
       }))
     })
 
@@ -215,7 +210,6 @@ 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,
@@ -323,13 +317,16 @@ const AppearanceTab = {
       }
     },
     isThemeActive (key) {
-      return key === (this.mergedConfig.theme || this.$store.state.instance.theme)
+      const { theme } = this.mergedConfig
+      return key === theme
     },
     isStyleActive (key) {
-      return key === (this.mergedConfig.style || this.$store.state.instance.style)
+      const { style } = this.mergedConfig
+      return key === style
     },
     isPaletteActive (key) {
-      return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
+      const { palette } = this.mergedConfig
+      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: isStyleActive(style.key) }"
+          :class="{ toggled: isThemeActive(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="() => setPalette(p.key, p)"
+              @click="() => setPaletteCustom(p)"
             >
               <div class="palette-label">
                 <label>

src/modules/interface.js

@@ -13,7 +13,6 @@ const defaultState = {
   themeVersion: 'v3',
   styleNameUsed: null,
   styleDataUsed: null,
-  useStylePalette: false, // hack for applying styles from appearance tab
   paletteNameUsed: null,
   paletteDataUsed: null,
   themeNameUsed: null,
@@ -266,29 +265,23 @@ const interfaceMod = {
         return Promise.resolve({})
       }
     },
-    setStyle ({ dispatch, commit, state }, value) {
+    setStyle ({ dispatch, commit }, value) {
       dispatch('resetThemeV3')
       dispatch('resetThemeV2')
       dispatch('resetThemeV3Palette')
 
       commit('setOption', { name: 'style', value })
-      state.useStylePalette = true
 
-      dispatch('applyTheme', { recompile: true }).then(() => {
+      dispatch('applyTheme', { recompile: true })
-        state.useStylePalette = false
-      })
     },
-    setStyleCustom ({ dispatch, commit, state }, value) {
+    setStyleCustom ({ dispatch, commit }, value) {
       dispatch('resetThemeV3')
       dispatch('resetThemeV2')
       dispatch('resetThemeV3Palette')
 
       commit('setOption', { name: 'styleCustomData', value })
 
-      state.useStylePalette = true
+      dispatch('applyTheme', { recompile: true })
-      dispatch('applyTheme', { recompile: true }).then(() => {
-        state.useStylePalette = false
-      })
     },
     async fetchThemesIndex ({ commit, state }) {
       try {
@@ -482,7 +475,7 @@ const interfaceMod = {
             return { name: x.variant, ...cleanDirectives }
           })
           .forEach(palette => {
-            const key = 'style.' + palette.name.toLowerCase().replace(/ /g, '_')
+            const key = 'style.' + palette.name.toLowerCase().replace(/ /, '_')
             if (!firstStylePaletteName) firstStylePaletteName = key
             palettesIndex[key] = () => Promise.resolve(palette)
           })
@@ -491,13 +484,9 @@ const interfaceMod = {
           'palette',
           palettesIndex,
           userPaletteCustomData,
-          state.useStylePalette ? firstStylePaletteName : (userPaletteName || instancePaletteName)
+          userPaletteName || firstStylePaletteName || instancePaletteName
         )
 
-        if (state.useStylePalette) {
-          commit('setOption', { name: 'palette', value: firstStylePaletteName })
-        }
-
         state.paletteNameUsed = palette.nameUsed
         state.paletteDataUsed = palette.dataUsed