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

3 files changed, 19 insertions, 4 deletions

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 3776464a..d340fd00 100644
--- 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}`)
       }))
     }
   },
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index fb24cc6b..d3df76a1 100644
--- 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') }}
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 72e2b625..7ca3b066 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -502,6 +502,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
+          ignore: true,
           themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
@@ -699,13 +700,13 @@ export default {
       }
     },
     updateTheme3Preview () {
-      console.log(this.previewTheme)
       const theme2 = convertTheme2To3(this.previewTheme)
       const theme3 = init({
-        extraRuleset: theme2,
+        inputRuleset: theme2,
         ultimateBackgroundColor: '#000000',
         liteMode: true
       })
+
       this.themeV3Preview = getCssRules(theme3.eager)
         .map(x => {
           if (x.startsWith('html')) {
@@ -722,7 +723,7 @@ export default {
   watch: {
     currentRadii () {
       try {
-        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme
+        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
         this.radiiInvalid = false
       } catch (e) {
         this.radiiInvalid = true
@@ -744,7 +745,7 @@ export default {
     fontsLocal: {
       handler () {
         try {
-          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme
+          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
           this.fontsInvalid = false
         } catch (e) {
           this.fontsInvalid = true