From d6ebc5049eb6529bbf98e72f8a26550efd0c902b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 2 Jul 2025 23:24:12 +0300
Subject: [PATCH 1/2] cleanup

---
 src/services/style_setter/style_setter.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 8e861d5d7..9d637deb0 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -115,8 +115,8 @@ export const tryLoadCache = async () => {
       const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
       const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-      cache.data[0].forEach(rule => eagerStyles.addRule(rule, 'index-max'))
-      cache.data[1].forEach(rule => lazyStyles.addRule(rule, 'index-max'))
+      cache.data[0].forEach(rule => eagerStyles.addRule(rule))
+      cache.data[1].forEach(rule => lazyStyles.addRule(rule))
 
       eagerStyles.ready = true
       lazyStyles.ready = true
@@ -234,13 +234,13 @@ export const applyConfig = (input) => {
 
   const styleSheet = createStyleSheet('theme-holder')
 
-  styleSheet.addRule(`:root { ${rules} }`, 'index-max')
+  styleSheet.addRule(`:root { ${rules} }`)
 
   // TODO find a way to make this not apply to theme previews
   if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
     styleSheet.addRule(` *:not(.preview-block) {
         --roundness: var(--forcedRoundness) !important;
-    }`, 'index-max')
+    }`)
   }
   styleSheet.ready = true
   adoptStyleSheets()

From 1bc53262d634a7f1e5128881db63a4295c52e3c2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 2 Jul 2025 23:24:19 +0300
Subject: [PATCH 2/2] theme tab support

---
 .../settings_modal/tabs/theme_tab/theme_tab.js        | 11 ++++++++---
 .../settings_modal/tabs/theme_tab/theme_tab.vue       |  6 ------
 2 files changed, 8 insertions(+), 9 deletions(-)

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 a44d4d333..756f67cf7 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -31,6 +31,7 @@ import {
   getCssRules,
   getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
+import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
@@ -68,7 +69,6 @@ const colorConvert = (color) => {
 export default {
   data () {
     return {
-      themeV3Preview: [],
       themeImporter: newImporter({
         validator: this.importValidator,
         onImport: this.onImport,
@@ -697,10 +697,15 @@ export default {
         liteMode: true
       })
 
-      this.themeV3Preview = getScopedVersion(
+      const sheet = createStyleSheet('theme-tab-overall-preview')
+      const rule = getScopedVersion(
         getCssRules(theme3.eager),
-        '#theme-preview'
+        '&'
       ).join('\n')
+
+      sheet.addRule('#theme-preview {\n' + rule + '\n}')
+      sheet.ready = true
+      adoptStyleSheets()
     }
   },
   watch: {
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 886d97764..ec3f0cb5d 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -123,12 +123,6 @@
       </div>
     </div>
 
-    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
-    <component
-      :is="'style'"
-      v-html="themeV3Preview"
-    />
-    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
     <preview id="theme-preview" />
 
     <div>