UI: Expose theme as css custom props (#2380)

FixJSDOMEnvironment.ts

@@ -26,5 +26,12 @@ export default class FixJSDOMEnvironment extends JSDOMEnvironment {
     this.global.TextDecoderStream = TextDecoderStream;
     this.global.URL = URL;
     this.global.Response = Response;
+
+    /**
+     * https://github.com/jsdom/jsdom/issues/3766
+     * https://github.com/jsdom/jsdom/issues/3444
+     */
+    this.global.document.adoptedStyleSheets = [];
+    this.global.CSSStyleSheet.prototype.replaceSync = () => {};
   }
 }

src/Themes/ui/Theme.tsx

@@ -51,6 +51,7 @@ declare module "@mui/material/styles" {
 }
 
 let theme: Theme;
+const themeStyleSheet = new CSSStyleSheet();
 
 export function refreshTheme(): void {
   theme = createTheme({
@@ -419,7 +420,18 @@ export function refreshTheme(): void {
   });
 
   document.body.style.backgroundColor = theme.colors.backgroundprimary?.toString() ?? "black";
+
+  const styleSheet =
+    ":root {" +
+    Object.entries(Settings.theme)
+      .map(([k, v]) => `--bb-theme-${k}: ${v}`)
+      .join(";") +
+    "}";
+
+  themeStyleSheet.replaceSync(styleSheet);
 }
+
+document.adoptedStyleSheets.push(themeStyleSheet);
 refreshTheme();
 
 interface IProps {