diff --git a/preview.style.js b/preview.style.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 11c90b034..72e2b625c 100644
--- 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()
     },
@@ -532,16 +520,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 +688,8 @@ export default {
         } else {
           this.shadowsLocal = shadows
         }
+        this.updatePreviewColors()
+        this.updatePreviewShadows()
         this.shadowSelected = this.shadowsAvailable[0]
       }
 
@@ -699,12 +697,32 @@ export default {
         this.clearFonts()
         this.fontsLocal = fonts
       }
+    },
+    updateTheme3Preview () {
+      console.log(this.previewTheme)
+      const theme2 = convertTheme2To3(this.previewTheme)
+      const theme3 = init({
+        extraRuleset: 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
         this.radiiInvalid = false
       } catch (e) {
         this.radiiInvalid = true
@@ -713,9 +731,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 +744,7 @@ export default {
     fontsLocal: {
       handler () {
         try {
-          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme
           this.fontsInvalid = false
         } catch (e) {
           this.fontsInvalid = true
@@ -738,18 +755,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)
       }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index ff2fece9c..dd23145c1 100644
--- 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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a2c355fc6..770a4a658 100644
--- 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": {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9e068a1ec..78e7428db 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -61,7 +61,11 @@ export const generateTheme = async (input, callbacks, debug) => {
   }
 
   // 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)
+  const themes3 = init({
+    extraRules,
+    ultimateBackgroundColor: extraRules[0].directives['--bg'].split('|')[1].trim(),
+    debug
+  })
 
   console.log('DEBUG 2 IS', debug)
 
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index d1043c522..e98b19a78 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -149,7 +149,13 @@ const ruleToSelector = genericRuleToSelector(components)
 
 export const getEngineChecksum = () => engineChecksum
 
-export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
+export const init = ({
+  extraRuleset,
+  ultimateBackgroundColor,
+  debug = false,
+  liteMode = false,
+  rootComponentName = 'Root'
+}) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
@@ -451,7 +457,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')