Merge branch 'appearance-tab' into shigusegubu-themes3

MASSIVELY streamlined theme setting process, now EVERYTHING happens in a vuex action "setTheme" instead of several different applyTheme()s scattered around
"fix" theme preview
2024-07-10 22:50:44 +03:00 · 2024-07-10 22:49:56 +03:00 · 2024-07-04 03:20:26 +03:00
13 changed files with 326 additions and 236 deletions
--- a/preview.style.js
+++ b/preview.style.js
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -13,8 +13,7 @@ import VBodyScrollLock from 'src/directives/body_scroll_lock'
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
-import { applyTheme, applyConfig, tryLoadCache } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'

@ -160,8 +159,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
  copyInstanceOption('showFeaturesPanel')
  copyInstanceOption('hideSitename')
  copyInstanceOption('sidebarRight')
-
-  return store.dispatch('setTheme', config.theme)
 }

 const getTOS = async ({ store }) => {
@ -352,29 +349,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
  store.dispatch('setInstanceOption', { name: 'server', value: server })

  await setConfig({ store })
-
-  const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
-  const { theme } = store.state.instance
-  const customThemePresent = customThemeSource || customTheme
-
-  console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
-
-  if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
-    store.commit('setThemeApplied')
-  } else {
-    if (customThemePresent) {
-      if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-        applyTheme(customThemeSource, () => {}, themeDebug)
-      } else {
-        applyTheme(customTheme, () => {}, themeDebug)
-      }
-      store.commit('setThemeApplied')
-    } else if (theme) {
-      // do nothing, it will load asynchronously
-    } else {
-      console.error('Failed to load any theme!')
-    }
-  }
+  await store.dispatch('setTheme')

  applyConfig(store.state.config)

--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@ -29,6 +29,11 @@ const AppearanceTab = {
        key: mode,
        value: i - 1,
        label: this.$t(`settings.forced_roundness_mode_${mode}`)
+      })),
+      underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.underlay_override_mode_${mode}`)
      }))
    }
  },
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@ -182,6 +182,15 @@
            {{ $t('settings.force_interface_roundness') }}
          </ChoiceSetting>
        </li>
+        <li>
+          <ChoiceSetting
+            id="underlayOverride"
+            path="theme3hacks.underlay"
+            :options="underlayOverrideModes"
+          >
+            {{ $t('settings.underlay_overrides') }}
+          </ChoiceSetting>
+        </li>
        <li v-if="instanceWallpaperUsed">
          <BooleanSetting path="hideInstanceWallpaper">
            {{ $t('settings.hide_wallpaper') }}
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@ -1,7 +1,8 @@
 import {
  rgb2hex,
  hex2rgb,
-  getContrastRatioLayers
+  getContrastRatioLayers,
+  relativeLuminance
 } from 'src/services/color_convert/color_convert.js'
 import {
  getThemes
@ -23,10 +24,14 @@ import {
  generateShadows,
  generateRadii,
  generateFonts,
-  composePreset,
  shadows2to3,
  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
+
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import { getCssRules } from 'src/services/theme_data/css_utils.js'
+
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
 import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
@ -62,6 +67,7 @@ const colorConvert = (color) => {
 export default {
  data () {
    return {
+      themeV3Preview: [],
      themeImporter: newImporter({
        validator: this.importValidator,
        onImport: this.onImport,
@ -78,10 +84,7 @@ export default {
      tempImportFile: undefined,
      engineVersion: 0,

-      previewShadows: {},
-      previewColors: {},
-      previewRadii: {},
-      previewFonts: {},
+      previewTheme: {},

      shadowsInvalid: true,
      colorsInvalid: true,
@ -232,13 +235,6 @@ export default {
        chatMessage: this.chatMessageRadiusLocal
      }
    },
-    preview () {
-      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
-    },
-    previewTheme () {
-      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
-      return this.preview.theme
-    },
    // This needs optimization maybe
    previewContrast () {
      try {
@ -306,14 +302,6 @@ export default {
        return {}
      }
    },
-    previewRules () {
-      if (!this.preview.rules) return ''
-      return [
-        ...Object.values(this.preview.rules),
-        'color: var(--text)',
-        'font-family: var(--interfaceFont, sans-serif)'
-      ].join(';')
-    },
    shadowsAvailable () {
      return Object.keys(DEFAULT_SHADOWS).sort()
    },
@ -514,6 +502,7 @@ export default {
      this.$store.dispatch('setOption', {
        name: 'customTheme',
        value: {
+          ignore: true,
          themeFileVersion: this.selectedVersion,
          themeEngineVersion: CURRENT_VERSION,
          ...this.previewTheme
@ -532,16 +521,24 @@ export default {
        }
      })
    },
-    updatePreviewColorsAndShadows () {
-      this.previewColors = generateColors({
+    updatePreviewColors () {
+      const result = generateColors({
        opacity: this.currentOpacity,
        colors: this.currentColors
      })
-      this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
-        this.previewColors.theme.colors,
-        this.previewColors.mod
-      )
+      this.previewTheme.colors = result.theme.colors
+      this.previewTheme.opacity = result.theme.opacity
+    },
+    updatePreviewShadows () {
+      this.previewTheme.shadows = generateShadows(
+        {
+          shadows: this.shadowsLocal,
+          opacity: this.previewTheme.opacity,
+          themeEngineVersion: this.engineVersion
+        },
+        this.previewTheme.colors,
+        relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
+      ).theme.shadows
    },
    importTheme () { this.themeImporter.importData() },
    exportTheme () { this.themeExporter.exportData() },
@ -692,6 +689,8 @@ export default {
        } else {
          this.shadowsLocal = shadows
        }
+        this.updatePreviewColors()
+        this.updatePreviewShadows()
        this.shadowSelected = this.shadowsAvailable[0]
      }

@ -699,12 +698,32 @@ export default {
        this.clearFonts()
        this.fontsLocal = fonts
      }
+    },
+    updateTheme3Preview () {
+      const theme2 = convertTheme2To3(this.previewTheme)
+      const theme3 = init({
+        inputRuleset: theme2,
+        ultimateBackgroundColor: '#000000',
+        liteMode: true
+      })
+
+      this.themeV3Preview = getCssRules(theme3.eager)
+        .map(x => {
+          if (x.startsWith('html')) {
+            return x.replace('html', '#theme-preview')
+          } else if (x.startsWith('#content')) {
+            return x.replace('#content', '#theme-preview')
+          } else {
+            return '#theme-preview > ' + x
+          }
+        })
+        .join('\n')
    }
  },
  watch: {
    currentRadii () {
      try {
-        this.previewRadii = generateRadii({ radii: this.currentRadii })
+        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
        this.radiiInvalid = false
      } catch (e) {
        this.radiiInvalid = true
@ -713,9 +732,8 @@ export default {
    },
    shadowsLocal: {
      handler () {
-        if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
        try {
-          this.updatePreviewColorsAndShadows()
+          this.updatePreviewShadows()
          this.shadowsInvalid = false
        } catch (e) {
          this.shadowsInvalid = true
@ -727,7 +745,7 @@ export default {
    fontsLocal: {
      handler () {
        try {
-          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
          this.fontsInvalid = false
        } catch (e) {
          this.fontsInvalid = true
@ -738,18 +756,16 @@ export default {
    },
    currentColors () {
      try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
        this.colorsInvalid = false
-        this.shadowsInvalid = false
      } catch (e) {
        this.colorsInvalid = true
-        this.shadowsInvalid = true
        console.warn(e)
      }
    },
    currentOpacity () {
      try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
      } catch (e) {
        console.warn(e)
      }
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@ -1,5 +1,8 @@
 <template>
  <div class="theme-tab">
+    <div class="alert warning">
+      {{ $t("settings.style.themes2_outdated") }}
+    </div>
    <div class="presets-container">
      <div class="save-load">
        <div
@ -120,7 +123,19 @@
      </div>
    </div>

-    <preview :style="previewRules" />
+    <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+    <component :is="'style'" v-html="themeV3Preview"/>
+    <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+    <preview id="theme-preview"/>
+
+    <div>
+      <button
+        class="btn button-default"
+        @click="updateTheme3Preview"
+      >
+        {{ $t("settings.style.update_preview") }}
+      </button>
+    </div>

    <keep-alive>
      <tab-switcher key="style-tweak">
@ -156,7 +171,7 @@
            <OpacityInput
              v-model="bgOpacityLocal"
              name="bgOpacity"
-              :fallback="previewTheme.opacity.bg"
+              :fallback="previewTheme.opacity?.bg"
            />
            <ColorInput
              v-model="textColorLocal"
@ -167,14 +182,14 @@
            <ColorInput
              v-model="accentColorLocal"
              name="accentColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
              :label="$t('settings.accent')"
              :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
            />
            <ColorInput
              v-model="linkColorLocal"
              name="linkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
              :label="$t('settings.links')"
              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
            />
@ -190,13 +205,13 @@
              v-model="fgTextColorLocal"
              name="fgTextColor"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.fgText"
+              :fallback="previewTheme.colors?.fgText"
            />
            <ColorInput
              v-model="fgLinkColorLocal"
              name="fgLinkColor"
              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.fgLink"
+              :fallback="previewTheme.colors?.fgLink"
            />
            <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
          </div>
@ -256,14 +271,14 @@
            <ColorInput
              v-model="postLinkColorLocal"
              name="postLinkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
              :label="$t('settings.links')"
            />
            <ContrastRatio :contrast="previewContrast.postLink" />
            <ColorInput
              v-model="postGreentextColorLocal"
              name="postGreentextColor"
-              :fallback="previewTheme.colors.cGreen"
+              :fallback="previewTheme.colors?.cGreen"
              :label="$t('settings.greentext')"
            />
            <ContrastRatio :contrast="previewContrast.postGreentext" />
@ -272,13 +287,13 @@
              v-model="alertErrorColorLocal"
              name="alertError"
              :label="$t('settings.style.advanced_colors.alert_error')"
-              :fallback="previewTheme.colors.alertError"
+              :fallback="previewTheme.colors?.alertError"
            />
            <ColorInput
              v-model="alertErrorTextColorLocal"
              name="alertErrorText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertErrorText"
+              :fallback="previewTheme.colors?.alertErrorText"
            />
            <ContrastRatio
              :contrast="previewContrast.alertErrorText"
@ -288,13 +303,13 @@
              v-model="alertWarningColorLocal"
              name="alertWarning"
              :label="$t('settings.style.advanced_colors.alert_warning')"
-              :fallback="previewTheme.colors.alertWarning"
+              :fallback="previewTheme.colors?.alertWarning"
            />
            <ColorInput
              v-model="alertWarningTextColorLocal"
              name="alertWarningText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertWarningText"
+              :fallback="previewTheme.colors?.alertWarningText"
            />
            <ContrastRatio
              :contrast="previewContrast.alertWarningText"
@ -304,13 +319,13 @@
              v-model="alertNeutralColorLocal"
              name="alertNeutral"
              :label="$t('settings.style.advanced_colors.alert_neutral')"
-              :fallback="previewTheme.colors.alertNeutral"
+              :fallback="previewTheme.colors?.alertNeutral"
            />
            <ColorInput
              v-model="alertNeutralTextColorLocal"
              name="alertNeutralText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertNeutralText"
+              :fallback="previewTheme.colors?.alertNeutralText"
            />
            <ContrastRatio
              :contrast="previewContrast.alertNeutralText"
@ -319,7 +334,7 @@
            <OpacityInput
              v-model="alertOpacityLocal"
              name="alertOpacity"
-              :fallback="previewTheme.opacity.alert"
+              :fallback="previewTheme.opacity?.alert"
            />
          </div>
          <div class="color-item">
@ -328,13 +343,13 @@
              v-model="badgeNotificationColorLocal"
              name="badgeNotification"
              :label="$t('settings.style.advanced_colors.badge_notification')"
-              :fallback="previewTheme.colors.badgeNotification"
+              :fallback="previewTheme.colors?.badgeNotification"
            />
            <ColorInput
              v-model="badgeNotificationTextColorLocal"
              name="badgeNotificationText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.badgeNotificationText"
+              :fallback="previewTheme.colors?.badgeNotificationText"
            />
            <ContrastRatio
              :contrast="previewContrast.badgeNotificationText"
@ -346,19 +361,19 @@
            <ColorInput
              v-model="panelColorLocal"
              name="panelColor"
-              :fallback="previewTheme.colors.panel"
+              :fallback="previewTheme.colors?.panel"
              :label="$t('settings.background')"
            />
            <OpacityInput
              v-model="panelOpacityLocal"
              name="panelOpacity"
-              :fallback="previewTheme.opacity.panel"
+              :fallback="previewTheme.opacity?.panel"
              :disabled="panelColorLocal === 'transparent'"
            />
            <ColorInput
              v-model="panelTextColorLocal"
              name="panelTextColor"
-              :fallback="previewTheme.colors.panelText"
+              :fallback="previewTheme.colors?.panelText"
              :label="$t('settings.text')"
            />
            <ContrastRatio
@ -368,7 +383,7 @@
            <ColorInput
              v-model="panelLinkColorLocal"
              name="panelLinkColor"
-              :fallback="previewTheme.colors.panelLink"
+              :fallback="previewTheme.colors?.panelLink"
              :label="$t('settings.links')"
            />
            <ContrastRatio
@ -381,20 +396,20 @@
            <ColorInput
              v-model="topBarColorLocal"
              name="topBarColor"
-              :fallback="previewTheme.colors.topBar"
+              :fallback="previewTheme.colors?.topBar"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="topBarTextColorLocal"
              name="topBarTextColor"
-              :fallback="previewTheme.colors.topBarText"
+              :fallback="previewTheme.colors?.topBarText"
              :label="$t('settings.text')"
            />
            <ContrastRatio :contrast="previewContrast.topBarText" />
            <ColorInput
              v-model="topBarLinkColorLocal"
              name="topBarLinkColor"
-              :fallback="previewTheme.colors.topBarLink"
+              :fallback="previewTheme.colors?.topBarLink"
              :label="$t('settings.links')"
            />
            <ContrastRatio :contrast="previewContrast.topBarLink" />
@ -404,19 +419,19 @@
            <ColorInput
              v-model="inputColorLocal"
              name="inputColor"
-              :fallback="previewTheme.colors.input"
+              :fallback="previewTheme.colors?.input"
              :label="$t('settings.background')"
            />
            <OpacityInput
              v-model="inputOpacityLocal"
              name="inputOpacity"
-              :fallback="previewTheme.opacity.input"
+              :fallback="previewTheme.opacity?.input"
              :disabled="inputColorLocal === 'transparent'"
            />
            <ColorInput
              v-model="inputTextColorLocal"
              name="inputTextColor"
-              :fallback="previewTheme.colors.inputText"
+              :fallback="previewTheme.colors?.inputText"
              :label="$t('settings.text')"
            />
            <ContrastRatio :contrast="previewContrast.inputText" />
@ -426,33 +441,33 @@
            <ColorInput
              v-model="btnColorLocal"
              name="btnColor"
-              :fallback="previewTheme.colors.btn"
+              :fallback="previewTheme.colors?.btn"
              :label="$t('settings.background')"
            />
            <OpacityInput
              v-model="btnOpacityLocal"
              name="btnOpacity"
-              :fallback="previewTheme.opacity.btn"
+              :fallback="previewTheme.opacity?.btn"
              :disabled="btnColorLocal === 'transparent'"
            />
            <ColorInput
              v-model="btnTextColorLocal"
              name="btnTextColor"
-              :fallback="previewTheme.colors.btnText"
+              :fallback="previewTheme.colors?.btnText"
              :label="$t('settings.text')"
            />
            <ContrastRatio :contrast="previewContrast.btnText" />
            <ColorInput
              v-model="btnPanelTextColorLocal"
              name="btnPanelTextColor"
-              :fallback="previewTheme.colors.btnPanelText"
+              :fallback="previewTheme.colors?.btnPanelText"
              :label="$t('settings.style.advanced_colors.panel_header')"
            />
            <ContrastRatio :contrast="previewContrast.btnPanelText" />
            <ColorInput
              v-model="btnTopBarTextColorLocal"
              name="btnTopBarTextColor"
-              :fallback="previewTheme.colors.btnTopBarText"
+              :fallback="previewTheme.colors?.btnTopBarText"
              :label="$t('settings.style.advanced_colors.top_bar')"
            />
            <ContrastRatio :contrast="previewContrast.btnTopBarText" />
@ -460,27 +475,27 @@
            <ColorInput
              v-model="btnPressedColorLocal"
              name="btnPressedColor"
-              :fallback="previewTheme.colors.btnPressed"
+              :fallback="previewTheme.colors?.btnPressed"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="btnPressedTextColorLocal"
              name="btnPressedTextColor"
-              :fallback="previewTheme.colors.btnPressedText"
+              :fallback="previewTheme.colors?.btnPressedText"
              :label="$t('settings.text')"
            />
            <ContrastRatio :contrast="previewContrast.btnPressedText" />
            <ColorInput
              v-model="btnPressedPanelTextColorLocal"
              name="btnPressedPanelTextColor"
-              :fallback="previewTheme.colors.btnPressedPanelText"
+              :fallback="previewTheme.colors?.btnPressedPanelText"
              :label="$t('settings.style.advanced_colors.panel_header')"
            />
            <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
            <ColorInput
              v-model="btnPressedTopBarTextColorLocal"
              name="btnPressedTopBarTextColor"
-              :fallback="previewTheme.colors.btnPressedTopBarText"
+              :fallback="previewTheme.colors?.btnPressedTopBarText"
              :label="$t('settings.style.advanced_colors.top_bar')"
            />
            <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
@ -488,52 +503,52 @@
            <ColorInput
              v-model="btnDisabledColorLocal"
              name="btnDisabledColor"
-              :fallback="previewTheme.colors.btnDisabled"
+              :fallback="previewTheme.colors?.btnDisabled"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="btnDisabledTextColorLocal"
              name="btnDisabledTextColor"
-              :fallback="previewTheme.colors.btnDisabledText"
+              :fallback="previewTheme.colors?.btnDisabledText"
              :label="$t('settings.text')"
            />
            <ColorInput
              v-model="btnDisabledPanelTextColorLocal"
              name="btnDisabledPanelTextColor"
-              :fallback="previewTheme.colors.btnDisabledPanelText"
+              :fallback="previewTheme.colors?.btnDisabledPanelText"
              :label="$t('settings.style.advanced_colors.panel_header')"
            />
            <ColorInput
              v-model="btnDisabledTopBarTextColorLocal"
              name="btnDisabledTopBarTextColor"
-              :fallback="previewTheme.colors.btnDisabledTopBarText"
+              :fallback="previewTheme.colors?.btnDisabledTopBarText"
              :label="$t('settings.style.advanced_colors.top_bar')"
            />
            <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
            <ColorInput
              v-model="btnToggledColorLocal"
              name="btnToggledColor"
-              :fallback="previewTheme.colors.btnToggled"
+              :fallback="previewTheme.colors?.btnToggled"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="btnToggledTextColorLocal"
              name="btnToggledTextColor"
-              :fallback="previewTheme.colors.btnToggledText"
+              :fallback="previewTheme.colors?.btnToggledText"
              :label="$t('settings.text')"
            />
            <ContrastRatio :contrast="previewContrast.btnToggledText" />
            <ColorInput
              v-model="btnToggledPanelTextColorLocal"
              name="btnToggledPanelTextColor"
-              :fallback="previewTheme.colors.btnToggledPanelText"
+              :fallback="previewTheme.colors?.btnToggledPanelText"
              :label="$t('settings.style.advanced_colors.panel_header')"
            />
            <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
            <ColorInput
              v-model="btnToggledTopBarTextColorLocal"
              name="btnToggledTopBarTextColor"
-              :fallback="previewTheme.colors.btnToggledTopBarText"
+              :fallback="previewTheme.colors?.btnToggledTopBarText"
              :label="$t('settings.style.advanced_colors.top_bar')"
            />
            <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
@ -543,20 +558,20 @@
            <ColorInput
              v-model="tabColorLocal"
              name="tabColor"
-              :fallback="previewTheme.colors.tab"
+              :fallback="previewTheme.colors?.tab"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="tabTextColorLocal"
              name="tabTextColor"
-              :fallback="previewTheme.colors.tabText"
+              :fallback="previewTheme.colors?.tabText"
              :label="$t('settings.text')"
            />
            <ContrastRatio :contrast="previewContrast.tabText" />
            <ColorInput
              v-model="tabActiveTextColorLocal"
              name="tabActiveTextColor"
-              :fallback="previewTheme.colors.tabActiveText"
+              :fallback="previewTheme.colors?.tabActiveText"
              :label="$t('settings.text')"
            />
            <ContrastRatio :contrast="previewContrast.tabActiveText" />
@ -566,13 +581,13 @@
            <ColorInput
              v-model="borderColorLocal"
              name="borderColor"
-              :fallback="previewTheme.colors.border"
+              :fallback="previewTheme.colors?.border"
              :label="$t('settings.style.common.color')"
            />
            <OpacityInput
              v-model="borderOpacityLocal"
              name="borderOpacity"
-              :fallback="previewTheme.opacity.border"
+              :fallback="previewTheme.opacity?.border"
              :disabled="borderColorLocal === 'transparent'"
            />
          </div>
@ -581,25 +596,25 @@
            <ColorInput
              v-model="faintColorLocal"
              name="faintColor"
-              :fallback="previewTheme.colors.faint"
+              :fallback="previewTheme.colors?.faint"
              :label="$t('settings.text')"
            />
            <ColorInput
              v-model="faintLinkColorLocal"
              name="faintLinkColor"
-              :fallback="previewTheme.colors.faintLink"
+              :fallback="previewTheme.colors?.faintLink"
              :label="$t('settings.links')"
            />
            <ColorInput
              v-model="panelFaintColorLocal"
              name="panelFaintColor"
-              :fallback="previewTheme.colors.panelFaint"
+              :fallback="previewTheme.colors?.panelFaint"
              :label="$t('settings.style.advanced_colors.panel_header')"
            />
            <OpacityInput
              v-model="faintOpacityLocal"
              name="faintOpacity"
-              :fallback="previewTheme.opacity.faint"
+              :fallback="previewTheme.opacity?.faint"
            />
          </div>
          <div class="color-item">
@ -608,12 +623,12 @@
              v-model="underlayColorLocal"
              name="underlay"
              :label="$t('settings.style.advanced_colors.underlay')"
-              :fallback="previewTheme.colors.underlay"
+              :fallback="previewTheme.colors?.underlay"
            />
            <OpacityInput
              v-model="underlayOpacityLocal"
              name="underlayOpacity"
-              :fallback="previewTheme.opacity.underlay"
+              :fallback="previewTheme.opacity?.underlay"
              :disabled="underlayOpacityLocal === 'transparent'"
            />
          </div>
@ -623,7 +638,7 @@
              v-model="wallpaperColorLocal"
              name="wallpaper"
              :label="$t('settings.style.advanced_colors.wallpaper')"
-              :fallback="previewTheme.colors.wallpaper"
+              :fallback="previewTheme.colors?.wallpaper"
            />
          </div>
          <div class="color-item">
@ -632,13 +647,13 @@
              v-model="pollColorLocal"
              name="poll"
              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.poll"
+              :fallback="previewTheme.colors?.poll"
            />
            <ColorInput
              v-model="pollTextColorLocal"
              name="pollText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.pollText"
+              :fallback="previewTheme.colors?.pollText"
            />
          </div>
          <div class="color-item">
@ -647,7 +662,7 @@
              v-model="iconColorLocal"
              name="icon"
              :label="$t('settings.style.advanced_colors.icons')"
-              :fallback="previewTheme.colors.icon"
+              :fallback="previewTheme.colors?.icon"
            />
          </div>
          <div class="color-item">
@ -656,20 +671,20 @@
              v-model="highlightColorLocal"
              name="highlight"
              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.highlight"
+              :fallback="previewTheme.colors?.highlight"
            />
            <ColorInput
              v-model="highlightTextColorLocal"
              name="highlightText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.highlightText"
+              :fallback="previewTheme.colors?.highlightText"
            />
            <ContrastRatio :contrast="previewContrast.highlightText" />
            <ColorInput
              v-model="highlightLinkColorLocal"
              name="highlightLink"
              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.highlightLink"
+              :fallback="previewTheme.colors?.highlightLink"
            />
            <ContrastRatio :contrast="previewContrast.highlightLink" />
          </div>
@ -679,26 +694,26 @@
              v-model="popoverColorLocal"
              name="popover"
              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.popover"
+              :fallback="previewTheme.colors?.popover"
            />
            <OpacityInput
              v-model="popoverOpacityLocal"
              name="popoverOpacity"
-              :fallback="previewTheme.opacity.popover"
+              :fallback="previewTheme.opacity?.popover"
              :disabled="popoverOpacityLocal === 'transparent'"
            />
            <ColorInput
              v-model="popoverTextColorLocal"
              name="popoverText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.popoverText"
+              :fallback="previewTheme.colors?.popoverText"
            />
            <ContrastRatio :contrast="previewContrast.popoverText" />
            <ColorInput
              v-model="popoverLinkColorLocal"
              name="popoverLink"
              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.popoverLink"
+              :fallback="previewTheme.colors?.popoverLink"
            />
            <ContrastRatio :contrast="previewContrast.popoverLink" />
          </div>
@ -708,20 +723,20 @@
              v-model="selectedPostColorLocal"
              name="selectedPost"
              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedPost"
+              :fallback="previewTheme.colors?.selectedPost"
            />
            <ColorInput
              v-model="selectedPostTextColorLocal"
              name="selectedPostText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedPostText"
+              :fallback="previewTheme.colors?.selectedPostText"
            />
            <ContrastRatio :contrast="previewContrast.selectedPostText" />
            <ColorInput
              v-model="selectedPostLinkColorLocal"
              name="selectedPostLink"
              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedPostLink"
+              :fallback="previewTheme.colors?.selectedPostLink"
            />
            <ContrastRatio :contrast="previewContrast.selectedPostLink" />
          </div>
@ -731,20 +746,20 @@
              v-model="selectedMenuColorLocal"
              name="selectedMenu"
              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedMenu"
+              :fallback="previewTheme.colors?.selectedMenu"
            />
            <ColorInput
              v-model="selectedMenuTextColorLocal"
              name="selectedMenuText"
              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedMenuText"
+              :fallback="previewTheme.colors?.selectedMenuText"
            />
            <ContrastRatio :contrast="previewContrast.selectedMenuText" />
            <ColorInput
              v-model="selectedMenuLinkColorLocal"
              name="selectedMenuLink"
              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedMenuLink"
+              :fallback="previewTheme.colors?.selectedMenuLink"
            />
            <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
          </div>
@ -753,57 +768,57 @@
            <ColorInput
              v-model="chatBgColorLocal"
              name="chatBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
              :label="$t('settings.background')"
            />
            <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
            <ColorInput
              v-model="chatMessageIncomingBgColorLocal"
              name="chatMessageIncomingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="chatMessageIncomingTextColorLocal"
              name="chatMessageIncomingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
              :label="$t('settings.text')"
            />
            <ColorInput
              v-model="chatMessageIncomingLinkColorLocal"
              name="chatMessageIncomingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
              :label="$t('settings.links')"
            />
            <ColorInput
              v-model="chatMessageIncomingBorderColorLocal"
              name="chatMessageIncomingBorderLinkColor"
-              :fallback="previewTheme.colors.fg"
+              :fallback="previewTheme.colors?.fg"
              :label="$t('settings.style.advanced_colors.chat.border')"
            />
            <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
            <ColorInput
              v-model="chatMessageOutgoingBgColorLocal"
              name="chatMessageOutgoingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
              :label="$t('settings.background')"
            />
            <ColorInput
              v-model="chatMessageOutgoingTextColorLocal"
              name="chatMessageOutgoingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
              :label="$t('settings.text')"
            />
            <ColorInput
              v-model="chatMessageOutgoingLinkColorLocal"
              name="chatMessageOutgoingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
              :label="$t('settings.links')"
            />
            <ColorInput
              v-model="chatMessageOutgoingBorderColorLocal"
              name="chatMessageOutgoingBorderLinkColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
              :label="$t('settings.style.advanced_colors.chat.border')"
            />
          </div>
@ -826,7 +841,7 @@
            v-model="btnRadiusLocal"
            name="btnRadius"
            :label="$t('settings.btnRadius')"
-            :fallback="previewTheme.radii.btn"
+            :fallback="previewTheme.radii?.btn"
            max="16"
            hard-min="0"
          />
@ -834,7 +849,7 @@
            v-model="inputRadiusLocal"
            name="inputRadius"
            :label="$t('settings.inputRadius')"
-            :fallback="previewTheme.radii.input"
+            :fallback="previewTheme.radii?.input"
            max="9"
            hard-min="0"
          />
@ -842,7 +857,7 @@
            v-model="checkboxRadiusLocal"
            name="checkboxRadius"
            :label="$t('settings.checkboxRadius')"
-            :fallback="previewTheme.radii.checkbox"
+            :fallback="previewTheme.radii?.checkbox"
            max="16"
            hard-min="0"
          />
@ -850,7 +865,7 @@
            v-model="panelRadiusLocal"
            name="panelRadius"
            :label="$t('settings.panelRadius')"
-            :fallback="previewTheme.radii.panel"
+            :fallback="previewTheme.radii?.panel"
            max="50"
            hard-min="0"
          />
@ -858,7 +873,7 @@
            v-model="avatarRadiusLocal"
            name="avatarRadius"
            :label="$t('settings.avatarRadius')"
-            :fallback="previewTheme.radii.avatar"
+            :fallback="previewTheme.radii?.avatar"
            max="28"
            hard-min="0"
          />
@ -866,7 +881,7 @@
            v-model="avatarAltRadiusLocal"
            name="avatarAltRadius"
            :label="$t('settings.avatarAltRadius')"
-            :fallback="previewTheme.radii.avatarAlt"
+            :fallback="previewTheme.radii?.avatarAlt"
            max="28"
            hard-min="0"
          />
@ -874,7 +889,7 @@
            v-model="attachmentRadiusLocal"
            name="attachmentRadius"
            :label="$t('settings.attachmentRadius')"
-            :fallback="previewTheme.radii.attachment"
+            :fallback="previewTheme.radii?.attachment"
            max="50"
            hard-min="0"
          />
@ -882,7 +897,7 @@
            v-model="tooltipRadiusLocal"
            name="tooltipRadius"
            :label="$t('settings.tooltipRadius')"
-            :fallback="previewTheme.radii.tooltip"
+            :fallback="previewTheme.radii?.tooltip"
            max="50"
            hard-min="0"
          />
@ -890,7 +905,7 @@
            v-model="chatMessageRadiusLocal"
            name="chatMessageRadius"
            :label="$t('settings.chatMessageRadius')"
-            :fallback="previewTheme.radii.chatMessage || 2"
+            :fallback="previewTheme.radii?.chatMessage || 2"
            max="50"
            hard-min="0"
          />
@ -996,26 +1011,26 @@
            v-model="fontsLocal.interface"
            name="ui"
            :label="$t('settings.style.fonts.components.interface')"
-            :fallback="previewTheme.fonts.interface"
+            :fallback="previewTheme.fonts?.interface"
            no-inherit="1"
          />
          <FontControl
            v-model="fontsLocal.input"
            name="input"
            :label="$t('settings.style.fonts.components.input')"
-            :fallback="previewTheme.fonts.input"
+            :fallback="previewTheme.fonts?.input"
          />
          <FontControl
            v-model="fontsLocal.post"
            name="post"
            :label="$t('settings.style.fonts.components.post')"
-            :fallback="previewTheme.fonts.post"
+            :fallback="previewTheme.fonts?.post"
          />
          <FontControl
            v-model="fontsLocal.postCode"
            name="postCode"
            :label="$t('settings.style.fonts.components.postCode')"
-            :fallback="previewTheme.fonts.postCode"
+            :fallback="previewTheme.fonts?.postCode"
          />
        </div>
      </tab-switcher>
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -745,6 +745,8 @@
    "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
    "more_settings": "More settings",
    "style": {
+      "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
+      "update_preview": "Update preview",
      "themes3": {
        "define": "Override",
        "font": {
--- a/src/modules/config.js
+++ b/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':
--- a/src/modules/instance.js
+++ b/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) {
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -1,7 +1,5 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
-import { generatePreset } from '../theme_data/theme_data.service.js'
 import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
-import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
@ -45,25 +43,19 @@ const adoptStyleSheets = (styles) => {
  // is nothing to do here.
 }

-export const generateTheme = async (input, callbacks, debug) => {
+export const generateTheme = async (inputRuleset, callbacks, debug) => {
  const {
    onNewRule = (rule, isLazy) => {},
    onLazyFinished = () => {},
    onEagerFinished = () => {}
  } = callbacks

-  let extraRules
-  if (input.themeFileVersion === 1) {
-    extraRules = convertTheme2To3(input)
-  } else {
-    const { theme } = generatePreset(input)
-    extraRules = convertTheme2To3(theme)
-  }
-
  // Assuming that "worst case scenario background" is panel background since it's the most likely one
-  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)
-
-  console.log('DEBUG 2 IS', debug)
+  const themes3 = init({
+    inputRuleset,
+    ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
+    debug
+  })

  getCssRules(themes3.eager, debug).forEach(rule => {
    // Hacks to support multiple selectors on same component
@ -158,8 +150,6 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)

-  console.log('DEBUG IS', debug)
-
  const { lazyProcessFunc } = await generateTheme(
    input,
    {
@ -212,7 +202,6 @@ const extractStyleConfig = ({
    textSize
  }

-  console.log(forcedRoundness)
  switch (forcedRoundness) {
    case 'disable':
      break
@ -321,5 +310,3 @@ export const getPreset = (val) => {
      return { theme: data, source: theme.source }
    })
 }
-
-export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@ -265,6 +265,7 @@ export const convertTheme2To3 = (data) => {
    const newRules = []
    Object.keys(data.fonts || {}).forEach(key => {
      if (!fontsKeys.has(key)) return
+      if (!data.fonts[key]) return
      const originalFont = data.fonts[key].family
      const rule = { source: '2to3' }

--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@ -149,7 +149,14 @@ const ruleToSelector = genericRuleToSelector(components)

 export const getEngineChecksum = () => engineChecksum

-export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
+export const init = ({
+  inputRuleset,
+  ultimateBackgroundColor,
+  debug = false,
+  liteMode = false,
+  rootComponentName = 'Root'
+}) => {
+  if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
  const staticVars = {}
  const stacked = {}
  const computed = {}
@ -158,7 +165,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
    ...Object.values(components)
      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
      .reduce((acc, arr) => [...acc, ...arr], []),
-    ...extraRuleset
+    ...inputRuleset
  ].map(rule => {
    normalizeCombination(rule)
    let currentParent = rule.parent
@ -451,7 +458,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
  }

  const t0 = performance.now()
-  const combinations = processInnerComponent(components.Root)
+  const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
  const t1 = performance.now()
  console.debug('Tree traveral took ' + (t1 - t0) + ' ms')

--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@ -66,7 +66,7 @@ describe('Theme Data 3', () => {
    this.timeout(5000)

    it('Test initialization without anything', () => {
-      const out = init([], '#DEADAF')
+      const out = init({ ruleset: [], ultimateBackgroundColor: '#DEADAF' })

      expect(out).to.have.property('eager')
      expect(out).to.have.property('lazy')
@ -85,13 +85,16 @@ describe('Theme Data 3', () => {
    })

    it('Test initialization with a basic palette', () => {
-      const out = init([{
-        component: 'Root',
-        directives: {
-          '--bg': 'color | #008080',
-          '--fg': 'color | #00C0A0'
-        }
-      }], '#DEADAF')
+      const out = init({
+        ruleset: [{
+          component: 'Root',
+          directives: {
+            '--bg': 'color | #008080',
+            '--fg': 'color | #00C0A0'
+          }
+        }],
+        ultimateBackgroundColor: '#DEADAF'
+      })

      expect(out.staticVars).to.have.property('bg').equal('#008080')
      expect(out.staticVars).to.have.property('fg').equal('#00C0A0')
@ -105,17 +108,20 @@ describe('Theme Data 3', () => {
    })

    it('Test initialization with opacity', () => {
-      const out = init([{
-        component: 'Root',
-        directives: {
-          '--bg': 'color | #008080'
-        }
-      }, {
-        component: 'Panel',
-        directives: {
-          opacity: 0.5
-        }
-      }], '#DEADAF')
+      const out = init({
+        ruleset: [{
+          component: 'Root',
+          directives: {
+            '--bg': 'color | #008080'
+          }
+        }, {
+          component: 'Panel',
+          directives: {
+            opacity: 0.5
+          }
+        }],
+        ultimateBackgroundColor: '#DEADAF'
+      })

      expect(out.staticVars).to.have.property('bg').equal('#008080')
Author	SHA1	Message	Date
Henry Jameson	a81cd7ace0	Merge branch 'appearance-tab' into shigusegubu-themes3	2024-07-10 22:50:44 +03:00
Henry Jameson	c6ccab778f	MASSIVELY streamlined theme setting process, now EVERYTHING happens in a vuex action "setTheme" instead of several different applyTheme()s scattered around	2024-07-10 22:49:56 +03:00
Henry Jameson	8a41313bb4	"fix" theme preview	2024-07-04 03:20:26 +03:00