add ability to override underlay color/opacity regardless of theme

2 files changed, 36 insertions, 6 deletions

diff --git a/src/modules/config.js b/src/modules/config.js
index 109f2742..906a64b0 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -282,12 +282,12 @@ const config = {
         }
       } else {
         commit('setOption', { name, value })
-        if (
-          name.startsWith('theme3hacks') ||
-            APPEARANCE_SETTINGS_KEYS.has(name)
-        ) {
+        if (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 })
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 6a749bc3..a9cd70e5 100644
--- a/src/modules/interface.js
+++ b/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,