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>