made theme debug easier by making it an actual option

src/boot/after_store.js

@@ -353,18 +353,20 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   await setConfig({ store })
 
-  const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
+  const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  if (!forceThemeRecompilation && tryLoadCache()) {
+  console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
+
+  if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
     store.commit('setThemeApplied')
   } else {
     if (customThemePresent) {
       if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-        applyTheme(customThemeSource)
+        applyTheme(customThemeSource, () => {}, themeDebug)
       } else {
-        applyTheme(customTheme)
+        applyTheme(customTheme, () => {}, themeDebug)
       }
       store.commit('setThemeApplied')
     } else if (theme) {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -142,6 +142,22 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="forceThemeRecompilation"
+            :expert="1"
+          >
+            {{ $t('settings.force_theme_recompilation_debug') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="themeDebug"
+            :expert="1"
+          >
+            {{ $t('settings.theme_debug') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>

src/components/settings_modal/tabs/general_tab.vue

@@ -148,14 +148,6 @@
     <div class="setting-item">
       <h2>{{ $t('settings.post_look_feel') }}</h2>
       <ul class="setting-list">
-        <li>
-          <BooleanSetting
-            path="forceThemeRecompilation"
-            :expert="1"
-          >
-            {{ $t('settings.force_theme_recompilation_debug') }}
-          </BooleanSetting>
-        </li>
         <li>
           <ChoiceSetting
             id="conversationDisplay"

src/i18n/en.json

@@ -391,6 +391,7 @@
     "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": {
       "otp": "OTP",

src/modules/config.js

@@ -147,6 +147,7 @@ export const defaultState = {
   maxDepthInThread: undefined, // instance default
   autocompleteSelect: undefined, // instance default
   closingDrawerMarksAsSeen: undefined, // instance default
+  themeDebug: false,
   unseenAtTop: undefined, // instance default
   ignoreInactionableSeen: undefined // instance default
 }
@@ -274,9 +275,16 @@ const config = {
             applyConfig(state)
             break
           case 'customTheme':
-          case 'customThemeSource':
-            applyTheme(value)
+          case 'customThemeSource': {
+            const { themeDebug } = state
+            applyTheme(value, () => {}, themeDebug)
             break
+          }
+          case 'themeDebug': {
+            const { customTheme, customThemeSource } = state
+            applyTheme(customTheme || customThemeSource, () => {}, value)
+            break
+          }
           case 'interfaceLanguage':
             messages.setLanguage(this.getters.i18n, value)
             dispatch('loadUnicodeEmojiData', value)

src/modules/instance.js

@@ -383,16 +383,16 @@ const instance = {
         .then(themeData => {
           commit('setInstanceOption', { name: 'themeData', value: themeData })
           // No need to apply theme if there's user theme already
-          const { customTheme } = rootState.config
+          const { customTheme, themeDebug } = rootState.config
           const { themeApplied } = rootState.interface
           if (customTheme || themeApplied) return
 
           // New theme presets don't have 'theme' property, they use 'source'
           const themeSource = themeData.source
           if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource)
+            applyTheme(themeSource, null, themeDebug)
           } else {
-            applyTheme(themeData.theme)
+            applyTheme(themeData.theme, null, themeDebug)
           }
           commit('setThemeApplied')
         })

src/services/style_setter/style_setter.js

@@ -6,7 +6,7 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
-export const generateTheme = async (input, callbacks) => {
+export const generateTheme = async (input, callbacks, debug) => {
   const {
     onNewRule = (rule, isLazy) => {},
     onLazyFinished = () => {},
@@ -22,9 +22,11 @@ export const generateTheme = async (input, callbacks) => {
   }
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
-  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)
 
-  getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
+  console.log('DEBUG 2 IS', debug)
+
+  getCssRules(themes3.eager, debug).forEach(rule => {
     // Hacks to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
@@ -54,7 +56,7 @@ export const generateTheme = async (input, callbacks) => {
   const processChunk = () => {
     const chunk = chunks[counter]
     Promise.all(chunk.map(x => x())).then(result => {
-      getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+      getCssRules(result.filter(x => x), debug).forEach(rule => {
         if (rule.match(/\.modal-view/)) {
           const parts = rule.split(/[{}]/g)
           const newRule = [
@@ -113,12 +115,14 @@ export const tryLoadCache = () => {
   }
 }
 
-export const applyTheme = async (input, onFinish = (data) => {}) => {
+export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
   const styleSheet = new CSSStyleSheet()
   const styleArray = []
   const lazyStyleSheet = new CSSStyleSheet()
   const lazyStyleArray = []
 
+  console.log('DEBUG IS', debug)
+
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
@@ -140,7 +144,8 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
         onFinish(cache)
         localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
-    }
+    },
+    debug
   )
 
   setTimeout(lazyProcessFunc, 0)

src/services/theme_data/css_utils.js

@@ -2,11 +2,6 @@ import { convert } from 'chromatism'
 
 import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
 
-// This changes what backgrounds are used to "stacked" solid colors so you can see
-// what theme engine "thinks" is actual background color is for purposes of text color
-// generation and for when --stacked variable is used
-const DEBUG = false
-
 export const parseCssShadow = (text) => {
   const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
   const inset = /inset/.exec(text)?.[0]
@@ -66,7 +61,10 @@ export const getCssShadowFilter = (input) => {
     .join(' ')
 }
 
-export const getCssRules = (rules) => rules.map(rule => {
+// `debug` changes what backgrounds are used to "stacked" solid colors so you can see
+// what theme engine "thinks" is actual background color is for purposes of text color
+// generation and for when --stacked variable is used
+export const getCssRules = (rules, debug) => rules.map(rule => {
   let selector = rule.selector
   if (!selector) {
     selector = 'html'
@@ -93,7 +91,7 @@ export const getCssRules = (rules) => rules.map(rule => {
         ].join(';\n  ')
       }
       case 'background': {
-        if (DEBUG) {
+        if (debug) {
           return `
             --background: ${getCssColorString(rule.dynamicVars.stacked)};
             background-color: ${getCssColorString(rule.dynamicVars.stacked)};

src/services/theme_data/theme_data_3.service.js

@@ -149,7 +149,7 @@ const ruleToSelector = genericRuleToSelector(components)
 
 export const getEngineChecksum = () => engineChecksum
 
-export const init = (extraRuleset, ultimateBackgroundColor) => {
+export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}