MASSIVELY streamlined theme setting process, now EVERYTHING happens in a vuex action "setTheme" instead of several different applyTheme()s scattered around

src/modules/config.js

@@ -1,10 +1,21 @@
 import Cookies from 'js-cookie'
-import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
 import { set } from 'lodash'
 import localeService from '../services/locale/locale.service.js'
 
 const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
+const APPEARANCE_SETTINGS_KEYS = new Set([
+  'sidebarColumnWidth',
+  'contentColumnWidth',
+  'notifsColumnWidth',
+  'textSize',
+  'navbarSize',
+  'panelHeaderSize',
+  'forcedRoundness',
+  'emojiSize',
+  'emojiReactionsScale'
+])
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
@@ -81,6 +92,11 @@ export const defaultState = {
     chatMention: true,
     polls: true
   },
+  palette: null,
+  theme3hacks: {
+    underlay: 'none',
+    badgeColor: null
+  },
   webPushNotifications: false,
   webPushAlwaysShowNotifications: false,
   muteWords: [],
@@ -185,7 +201,6 @@ const config = {
       applyConfig(state)
     },
     setOption (state, { name, value }) {
-      console.log('SET OPTION', state, name, value)
       set(state, name, value)
     },
     setHighlight (state, { user, color, type }) {
@@ -261,30 +276,23 @@ const config = {
         }
       } else {
         commit('setOption', { name, value })
+        if (
+          name.startsWith('theme3hacks') ||
+            APPEARANCE_SETTINGS_KEYS.has(name)
+        ) {
+          applyConfig(state)
+        }
         switch (name) {
           case 'theme':
-            setPreset(value)
-            break
-          case 'sidebarColumnWidth':
-          case 'contentColumnWidth':
-          case 'notifsColumnWidth':
-          case 'textSize':
-          case 'navbarSize':
-          case 'panelHeaderSize':
-          case 'forcedRoundness':
-          case 'emojiSize':
-          case 'emojiReactionsScale':
-            applyConfig(state)
+            dispatch('setTheme', { themeName: value, recompile: true })
             break
           case 'customTheme':
           case 'customThemeSource': {
-            const { themeDebug } = state
-            applyTheme(value, () => {}, themeDebug)
+            if (!value.ignore) dispatch('setTheme', { themeData: value })
             break
           }
           case 'themeDebug': {
-            const { customTheme, customThemeSource } = state
-            applyTheme(customTheme || customThemeSource, () => {}, value)
+            dispatch('setTheme', { recompile: true })
             break
           }
           case 'interfaceLanguage':

src/modules/instance.js

@@ -1,5 +1,6 @@
-import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
+import { getPreset, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
+import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
@@ -286,9 +287,6 @@ const instance = {
             dispatch('initializeSocket')
           }
           break
-        case 'theme':
-          dispatch('setTheme', value)
-          break
       }
     },
     async getStaticEmoji ({ commit }) {
@@ -378,25 +376,86 @@ const instance = {
       }
     },
 
-    setTheme ({ commit, rootState }, themeName) {
-      commit('setInstanceOption', { name: 'theme', value: themeName })
-      getPreset(themeName)
-        .then(themeData => {
-          commit('setInstanceOption', { name: 'themeData', value: themeData })
-          // No need to apply theme if there's user theme already
-          const { customTheme, themeDebug } = rootState.config
-          const { themeApplied } = rootState.interface
-          if (customTheme || themeApplied) return
+    setTheme ({ commit, state, rootState }, { themeName, themeData, recompile } = {}) {
+      // const {
+      //   themeApplied
+      // } = rootState.interface
+      const {
+        theme: instanceThemeName
+      } = state
 
-          // New theme presets don't have 'theme' property, they use 'source'
-          const themeSource = themeData.source
-          if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource, null, themeDebug)
+      const {
+        customTheme: userThemeSnapshot,
+        customThemeSource: userThemeSource,
+        forceThemeRecompilation,
+        themeDebug
+      } = rootState.config
+
+      const forceRecompile = forceThemeRecompilation || recompile
+
+      // If we're not not forced to recompile try using
+      // cache (tryLoadCache return true if load successful)
+      if (!forceRecompile && !themeDebug && tryLoadCache()) {
+        commit('setThemeApplied')
+      }
+
+      const normalizeThemeData = (themeData) => {
+        console.log('NORMAL', themeData)
+        if (themeData.themeFileVerison === 1) {
+          return generatePreset(themeData).theme
+        }
+        // New theme presets don't have 'theme' property, they use 'source'
+        const themeSource = themeData.source
+
+        let out // shout, shout let it all out
+        if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
+          out = themeSource || themeData
+        } else {
+          out = themeData.theme
+        }
+
+        // generatePreset here basically creates/updates "snapshot",
+        // while also fixing the 2.2 -> 2.3 colors/shadows/etc
+        return generatePreset(out).theme
+      }
+
+      let promise = null
+
+      if (themeName) {
+        // commit('setInstanceOption', { name: 'theme', value: themeName })
+        promise = getPreset(themeName)
+          .then(themeData => {
+            // commit('setInstanceOption', { name: 'themeData', value: themeData })
+            return normalizeThemeData(themeData)
+          })
+      } else if (themeData) {
+        promise = Promise.resolve(normalizeThemeData(themeData))
+      } else {
+        if (userThemeSource || userThemeSnapshot) {
+          if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
+            promise = Promise.resolve(normalizeThemeData(userThemeSource))
           } else {
-            applyTheme(themeData.theme, null, themeDebug)
+            promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
           }
-          commit('setThemeApplied')
+        } else if (instanceThemeName) {
+          promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+        }
+      }
+
+      promise
+        .then(realThemeData => {
+          console.log('FR FR 1', realThemeData)
+          const ruleset = convertTheme2To3(realThemeData)
+          console.log('FR FR 2', ruleset)
+
+          applyTheme(
+            ruleset,
+            () => commit('setThemeApplied'),
+            themeDebug
+          )
         })
+
+      return promise
     },
     fetchEmoji ({ dispatch, state }) {
       if (!state.customEmojiFetched) {