made theme debug easier by making it an actual option

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 = {}