add ability to override underlay color/opacity regardless of theme

src/components/settings_modal/tabs/appearance_tab.js

@@ -28,12 +28,12 @@ const AppearanceTab = {
       forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
         key: mode,
         value: i - 1,
-        label: this.$t(`settings.forced_roundness_mode_${mode}`)
+        label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
       })),
       underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
         key: mode,
         value: mode,
-        label: this.$t(`settings.underlay_override_mode_${mode}`)
+        label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
       }))
     }
   },

src/components/settings_modal/tabs/appearance_tab.vue

@@ -179,7 +179,7 @@
             path="forcedRoundness"
             :options="forcedRoundnessOptions"
           >
-            {{ $t('settings.force_interface_roundness') }}
+            {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
           </ChoiceSetting>
         </li>
         <li>
@@ -188,7 +188,7 @@
             path="theme3hacks.underlay"
             :options="underlayOverrideModes"
           >
-            {{ $t('settings.underlay_overrides') }}
+            {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
           </ChoiceSetting>
         </li>
         <li v-if="instanceWallpaperUsed">

src/i18n/en.json

@@ -386,11 +386,6 @@
     "navbar_size": "Top bar size",
     "panel_header_size": "Panel header size",
     "visual_tweaks": "Minor visual tweaks",
-    "force_interface_roundness": "Override interface roundness/sharpness",
-    "forced_roundness_mode_disabled": "Use theme defaults",
-    "forced_roundness_mode_sharp": "Force sharp edges",
-    "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
-    "forced_roundness_mode_round": "Force round edges",
     "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
     "scale_and_layout": "Interface scale and layout",
     "mfa": {
@@ -749,6 +744,17 @@
       "update_preview": "Update preview",
       "themes3": {
         "define": "Override",
+        "hacks": {
+          "underlay_overrides": "Change underlay",
+          "underlay_override_mode_none": "Theme default",
+          "underlay_override_mode_opaque": "Replace with solid color",
+          "underlay_override_mode_transparent": "Remove entirely (might break some themes)",
+          "force_interface_roundness": "Override interface roundness/sharpness",
+          "forced_roundness_mode_disabled": "Use theme defaults",
+          "forced_roundness_mode_sharp": "Force sharp edges",
+          "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
+          "forced_roundness_mode_round": "Force round edges"
+        },
         "font": {
           "group-builtin": "Browser default fonts",
           "builtin" : {

src/modules/config.js

@@ -282,12 +282,12 @@ const config = {
         }
       } else {
         commit('setOption', { name, value })
-        if (
+        if (APPEARANCE_SETTINGS_KEYS.has(name)) {
-          name.startsWith('theme3hacks') ||
-            APPEARANCE_SETTINGS_KEYS.has(name)
-        ) {
           applyConfig(state)
         }
+        if (name.startsWith('theme3hacks')) {
+          dispatch('setTheme', { recompile: true })
+        }
         switch (name) {
           case 'theme':
             dispatch('setTheme', { themeName: value, recompile: true })

src/modules/interface.js

@@ -221,7 +221,8 @@ const interfaceMod = {
         customTheme: userThemeSnapshot,
         customThemeSource: userThemeSource,
         forceThemeRecompilation,
-        themeDebug
+        themeDebug,
+        theme3hacks
       } = rootState.config
 
       const forceRecompile = forceThemeRecompilation || recompile
@@ -275,7 +276,36 @@ const interfaceMod = {
 
       promise
         .then(realThemeData => {
-          const ruleset = convertTheme2To3(realThemeData)
+          const theme2ruleset = convertTheme2To3(realThemeData)
+          const hacks = []
+
+          Object.entries(theme3hacks).forEach(([key, value]) => {
+            switch (key) {
+              case 'underlay': {
+                if (value !== 'none') {
+                  const newRule = {
+                    component: 'Underlay',
+                    directives: {}
+                  }
+                  if (value === 'opaque') {
+                    newRule.directives.opacity = 1
+                    newRule.directives.background = '--wallpaper'
+                  }
+                  if (value === 'transparent') {
+                    newRule.directives.opacity = 0
+                  }
+                  console.log('NEW RULE', newRule)
+                  hacks.push(newRule)
+                }
+                break
+              }
+            }
+          })
+
+          const ruleset = [
+            ...theme2ruleset,
+            ...hacks
+          ]
 
           applyTheme(
             ruleset,

src/services/theme_data/theme2_to_theme3.js

@@ -12,7 +12,9 @@ export const basePaletteKeys = new Set([
   'cBlue',
   'cRed',
   'cGreen',
-  'cOrange'
+  'cOrange',
+
+  'wallpaper'
 ])
 
 export const fontsKeys = new Set([