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

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) {