it is working. finally.

src/services/style_setter/style_setter.js

@@ -52,7 +52,6 @@ export const generateTheme = async (inputRuleset, callbacks, debug) => {
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init({
     inputRuleset,
-    ultimateBackgroundColor: inputRuleset[0].directives['--bg']?.split('|')[1].trim() || '#000000',
     debug
   })
 
@@ -146,6 +145,7 @@ export const tryLoadCache = () => {
 }
 
 export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+  console.log('INPUT', input)
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 

src/services/theme_data/theme_data_3.service.js

@@ -230,6 +230,12 @@ export const init = ({
     })
     .map(({ data }) => data)
 
+  if (!ultimateBackgroundColor) {
+    console.warn('No ultimate background color provided, falling back to panel color')
+    const rootRule = ruleset.findLast((x) => (x.component === 'Root' && x.directives?.['--bg']))
+    ultimateBackgroundColor = rootRule.directives['--bg'].split('|')[1].trim()
+  }
+
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
   const nonEditableComponents = new Set(Object.values(components).filter(c => c.notEditable).map(c => c.name))