it is working. finally.

src/components/settings_modal/tabs/appearance_tab.js

@@ -174,7 +174,11 @@ const AppearanceTab = {
     },
     isCustomThemeUsed () {
       const { theme } = this.mergedConfig
-      return theme === 'custom' || theme === null
+      return theme === 'custom'
+    },
+    isCustomStyleUsed (name) {
+      const { style } = this.mergedConfig
+      return style === 'custom'
     },
     ...SharedComputedObject()
   },
@@ -196,12 +200,26 @@ const AppearanceTab = {
       const { theme } = this.mergedConfig
       return key === theme
     },
-    async setTheme (name) {
+    isStyleActive (key) {
-      await this.$store.dispatch('setTheme', name)
+      const { style } = this.mergedConfig
+      return key === style
+    },
+    isPaletteActive (key) {
+      const { palette } = this.mergedConfig
+      return key === palette
+    },
+    setTheme (name) {
+      this.$store.dispatch('setTheme', name)
       this.$store.dispatch('applyTheme')
     },
-    async setPalette (name) {
+    setPalette (name) {
-      await this.$store.dispatch('setPalette', name)
+      this.$store.dispatch('setPalette', name)
+      this.$store.dispatch('applyTheme')
+    },
+    resetTheming (name) {
+      this.$store.dispatch('resetThemeV2')
+      this.$store.dispatch('resetThemeV3')
+      this.$store.dispatch('setStyle', 'stock')
       this.$store.dispatch('applyTheme')
     },
     previewTheme (key, input) {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -9,7 +9,8 @@
         <button
           class="button-default theme-preview"
           data-theme-key="stock"
-          @click="setTheme(null)"
+          @click="resetTheming"
+          :class="{ toggled: isStyleActive('stock') }"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <component
@@ -49,7 +50,7 @@
             v-html="previewTheme(style.key, style.data)"
           />
           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-          <preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
+          <preview :id="'theme-preview-' + style.key"/>
           <h4 class="theme-name">
             {{ style.name }}
             <span class="alert neutral version">{{ style.version }}</span>
@@ -61,8 +62,9 @@
         <button
           v-for="p in availablePalettes"
           class="btn button-default palette-entry"
+          :class="{ toggled: isPaletteActive(p.key) }"
           :key="p.name"
-          @click="() => setPalette(p)"
+          @click="() => setPalette(p.key)"
         >
           <label>
             {{ p.name }}

src/modules/config.js

@@ -47,6 +47,8 @@ export const defaultState = {
   customThemeSource: undefined, // "source", stores original theme data
 
   // V3
+  style: null,
+  palette: null,
   themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
   forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
   theme3hacks: { // Hacks, user overrides that are independent of theme used

src/modules/interface.js

@@ -223,16 +223,16 @@ const interfaceMod = {
       }
     },
     setPalette ({ dispatch, commit }, value) {
-      dispatch('resetV3')
+      dispatch('resetThemeV3Palette')
-      dispatch('resetV2')
+      dispatch('resetThemeV2')
 
       commit('setOption', { name: 'palette', value })
 
       dispatch('applyTheme')
     },
     setPaletteCustom ({ dispatch, commit }, value) {
-      dispatch('resetV3')
+      dispatch('resetThemeV3Palette')
-      dispatch('resetV2')
+      dispatch('resetThemeV2')
 
       commit('setOption', { name: 'paletteCustomData', value })
 
@@ -249,16 +249,16 @@ const interfaceMod = {
       }
     },
     setStyle ({ dispatch, commit }, value) {
-      dispatch('resetV3')
+      dispatch('resetThemeV3')
-      dispatch('resetV2')
+      dispatch('resetThemeV2')
 
       commit('setOption', { name: 'style', value })
 
       dispatch('applyTheme')
     },
     setStyleCustom ({ dispatch, commit }, value) {
-      dispatch('resetV3')
+      dispatch('resetThemeV3')
-      dispatch('resetV2')
+      dispatch('resetThemeV2')
 
       commit('setOption', { name: 'styleCustomData', value })
 
@@ -275,29 +275,33 @@ const interfaceMod = {
       }
     },
     setTheme ({ dispatch, commit }, value) {
-      dispatch('resetV3')
+      dispatch('resetThemeV3')
-      dispatch('resetV2')
+      dispatch('resetThemeV3Palette')
+      dispatch('resetThemeV2')
 
       commit('setOption', { name: 'theme', value })
 
       dispatch('applyTheme')
     },
     setThemeCustom ({ dispatch, commit }, value) {
-      dispatch('resetV3')
+      dispatch('resetThemeV3')
-      dispatch('resetV2')
+      dispatch('resetThemeV3Palette')
+      dispatch('resetThemeV2')
 
       commit('setOption', { name: 'customTheme', value })
       commit('setOption', { name: 'customThemeSource', value })
 
       dispatch('applyTheme')
     },
-    resetV3 ({ dispatch, commit }) {
+    resetThemeV3 ({ dispatch, commit }) {
       commit('setOption', { name: 'style', value: null })
       commit('setOption', { name: 'styleCustomData', value: null })
+    },
+    resetThemeV3Palette ({ dispatch, commit }) {
       commit('setOption', { name: 'palette', value: null })
       commit('setOption', { name: 'paletteCustomData', value: null })
     },
-    resetV2 ({ dispatch, commit }) {
+    resetThemeV2 ({ dispatch, commit }) {
       commit('setOption', { name: 'theme', value: null })
       commit('setOption', { name: 'customTheme', value: null })
       commit('setOption', { name: 'customThemeSource', value: null })
@@ -333,7 +337,6 @@ const interfaceMod = {
         theme: userThemeV2Name,
         customTheme: userThemeV2Snapshot,
         customThemeSource: userThemeV2Source
-
       } = rootState.config
 
       const forceRecompile = forceThemeRecompilation || recompile
@@ -343,10 +346,34 @@ const interfaceMod = {
 
       let majorVersionUsed
 
+      console.log(
+        'USER V3',
+        userPaletteName,
+        userStyleName
+      )
+      console.log(
+        'USER V2',
+        userThemeV2Name,
+        userThemeV2Source,
+        userThemeV2Snapshot
+      )
+
+      console.log(
+        'INST V3',
+        instancePaletteName,
+        instanceStyleName
+      )
+      console.log(
+        'INST V2',
+        instanceThemeV2Name
+      )
+
       if (userPaletteName || userPaletteCustomData ||
           userStyleName || userStyleCustomData ||
           instancePaletteName ||
-          instanceStyleName
+          instanceStyleName ||
+          (instanceThemeV2Name == null &&
+           userThemeV2Name == null)
       ) {
         // Palette and/or style overrides V2 themes
         instanceThemeV2Name = null
@@ -364,13 +391,20 @@ const interfaceMod = {
           palettesIndex = result[0]
           stylesIndex = result[1]
         }
-      } else {
+      } else if (
+        userThemeV2Name ||
+          userThemeV2Snapshot ||
+          userThemeV2Source ||
+          instanceThemeV2Name
+      ) {
         majorVersionUsed = 'v2'
         // Promise.all just to be uniform with v3
         const result = await Promise.all([
           dispatch('fetchThemesIndex')
         ])
         themesIndex = result[0]
+      } else {
+        majorVersionUsed = 'v3'
       }
 
       let styleDataUsed = null
@@ -380,52 +414,93 @@ const interfaceMod = {
       let themeNameUsed = null
       let themeDataUsed = null
 
-      if (majorVersionUsed === 'v3') {
+      const getData = async (resource, index, customData, name) => {
-        if (userStyleCustomData) {
+        const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
-          styleNameUsed = 'custom' // custom data overrides name
+        const result = {}
-          styleDataUsed = userStyleCustomData
-        } else {
-          styleNameUsed = userStyleName || instanceStyleName
-          let styleFetchFunc = stylesIndex[themeNameUsed]
-          if (!styleFetchFunc) {
-            const newName = Object.keys(stylesIndex)[0]
-            styleFetchFunc = stylesIndex[newName]
-            console.warn(`Style with id '${styleNameUsed}' not found, falling back to '${newName}'`)
-          }
-          styleDataUsed = await styleFetchFunc?.()
-        }
 
-        if (userPaletteCustomData) {
+        if (customData) {
-          paletteNameUsed = 'custom' // custom data overrides name
+          result.nameUsed = 'custom' // custom data overrides name
-          paletteDataUsed = userPaletteCustomData
+          result.dataUsed = customData
         } else {
-          paletteNameUsed = userPaletteName || instanceStyleName
+          result.nameUsed = name
-          let paletteFetchFunc = palettesIndex[themeNameUsed]
+
-          if (!paletteFetchFunc) {
+          if (result.nameUsed === 'stock') {
-            const newName = Object.keys(palettesIndex)[0]
+            result.dataUsed = null
-            paletteFetchFunc = palettesIndex[newName]
+            return result
-            console.warn(`Palette with id '${paletteNameUsed}' not found, falling back to '${newName}'`)
           }
-          paletteDataUsed = await paletteFetchFunc?.()
+
+          let fetchFunc = index[result.nameUsed]
+          // Fallbacks
+          if (!fetchFunc) {
+            const newName = Object.keys(index)[0]
+            fetchFunc = index[newName]
+            console.warn(`${capitalizedResource} with id '${styleNameUsed}' not found, trying back to '${newName}'`)
+            if (!fetchFunc) {
+              console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
+              fetchFunc = () => Promise.resolve(null)
+            }
+          }
+          result.dataUsed = await fetchFunc()
         }
+        return result
+      }
+
+      console.log('VERSION', majorVersionUsed)
+
+      if (majorVersionUsed === 'v3') {
+        const palette = await getData(
+          'palette',
+          palettesIndex,
+          userPaletteCustomData,
+          userPaletteName || instancePaletteName
+        )
+        paletteNameUsed = palette.nameUsed
+        paletteDataUsed = palette.dataUsed
+        if (Array.isArray(paletteDataUsed)) {
+          const [
+            name,
+            background,
+            foreground,
+            text,
+            link,
+            cRed = '#FF0000',
+            cBlue = '#0000FF',
+            cGreen = '#00FF00',
+            cOrange = '#E3FF00'
+          ] = paletteDataUsed
+          paletteDataUsed = { name, background, foreground, text, link, cRed, cBlue, cGreen, cOrange }
+        }
+        console.log('PAL', userPaletteName, paletteNameUsed)
+        console.log('PAL', paletteDataUsed)
+
+        const style = await getData(
+          'style',
+          stylesIndex,
+          userStyleCustomData,
+          userStyleName || instanceStyleName
+        )
+        styleNameUsed = style.nameUsed
+        styleDataUsed = style.dataUsed
       } else {
-        if (userThemeV2Snapshot || userThemeV2Source) {
+        const theme = await getData(
-          themeNameUsed = 'custom' // custom data overrides name
+          'theme',
-          themeDataUsed = userThemeV2Snapshot || userThemeV2Source
+          themesIndex,
-        } else {
+          userThemeV2Source || userThemeV2Snapshot,
-          themeNameUsed = userThemeV2Name || instanceThemeV2Name
+          userThemeV2Name || instanceThemeV2Name
-          let themeFetchFunc = themesIndex[themeNameUsed]
+        )
-          if (!themeFetchFunc) {
+        themeNameUsed = theme.nameUsed
-            const newName = Object.keys(themesIndex)[0]
+        themeDataUsed = theme.dataUsed
-            themeFetchFunc = themesIndex[newName]
+
-            console.warn(`Theme with id '${themeNameUsed}' not found, falling back to '${newName}'`)
-          }
-          themeDataUsed = await themeFetchFunc?.()
-        }
         // Themes v2 editor support
         commit('setInstanceOption', { name: 'themeData', value: themeDataUsed })
       }
 
+      console.log('STYLE', styleNameUsed, paletteNameUsed, themeNameUsed)
+
+      // commit('setOption', { name: 'palette', value: paletteNameUsed })
+      // commit('setOption', { name: 'style', value: styleNameUsed })
+      // commit('setOption', { name: 'theme', value: themeNameUsed })
+
       const paletteIss = (() => {
         if (!paletteDataUsed) return null
         const result = {
@@ -433,6 +508,7 @@ const interfaceMod = {
           directives: {}
         }
 
+        console.log('PALETTE', paletteDataUsed)
         Object
           .entries(paletteDataUsed)
           .filter(([k]) => k !== 'name')

src/services/style_setter/style_setter.js

@@ -52,7 +52,6 @@ export const generateTheme = async (inputRuleset, callbacks, debug) => {
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init({
     inputRuleset,
-    ultimateBackgroundColor: inputRuleset[0].directives['--bg']?.split('|')[1].trim() || '#000000',
     debug
   })
 
@@ -146,6 +145,7 @@ export const tryLoadCache = () => {
 }
 
 export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+  console.log('INPUT', input)
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 

src/services/theme_data/theme_data_3.service.js

@@ -230,6 +230,12 @@ export const init = ({
     })
     .map(({ data }) => data)
 
+  if (!ultimateBackgroundColor) {
+    console.warn('No ultimate background color provided, falling back to panel color')
+    const rootRule = ruleset.findLast((x) => (x.component === 'Root' && x.directives?.['--bg']))
+    ultimateBackgroundColor = rootRule.directives['--bg'].split('|')[1].trim()
+  }
+
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
   const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))
 

static/config.json

@@ -24,6 +24,6 @@
   "showInstanceSpecificPanel": false,
   "sidebarRight": false,
   "subjectLineBehavior": "email",
-  "theme": "pleroma-dark",
+  "theme": null,
   "webPushNotifications": false
 }