save work

src/app/app.tsx

@@ -22,6 +22,7 @@ import { DisconnectedModal, ClientStopModal } from "@/modals";
 import { ModalsProvider } from "@/modals/provider";
 import { Button, TermStyleBlock } from "@/elements";
 import { ErrorBoundary } from "@/common/error/errorboundary";
+import { For } from "tsx-control-statements/components";
 import cn from "classnames";
 import "./app.less";
 
@@ -80,6 +81,21 @@ class App extends React.Component<{}, {}> {
         rightSidebarModel.saveState(width, false);
     }
 
+    getSelector(themeKey: string) {
+        const sessions = GlobalModel.getSessionNames();
+        const screens = GlobalModel.getScreenNames();
+
+        if (themeKey === "main") {
+            return ":root";
+        } else if (themeKey in screens) {
+            return `.main-content [data-screenid="${themeKey}"]`;
+        } else if (themeKey in sessions) {
+            return `.main-content [data-sessionid="${themeKey}"]`;
+        }
+
+        return null;
+    }
+
     render() {
         const remotesModel = GlobalModel.remotesModel;
         const disconnected = !GlobalModel.ws.open.get() || !GlobalModel.waveSrvRunning.get();
@@ -125,6 +141,7 @@ class App extends React.Component<{}, {}> {
         const activeMainView = GlobalModel.activeMainView.get();
         const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
         const termTheme = GlobalModel.getTermTheme();
+        const themeKey = null;
 
         return (
             <div
@@ -153,7 +170,13 @@ class App extends React.Component<{}, {}> {
                     </div>
                 </If>
                 <div ref={this.mainContentRef} className="main-content">
-                    <TermStyleBlock termTheme={termTheme} />
+                    <For index="idx" each="themeKey" of={Object.keys(termTheme)}>
+                        <TermStyleBlock
+                            key={themeKey}
+                            themeName={termTheme[themeKey]}
+                            selector={this.getSelector(themeKey)}
+                        />
+                    </For>
                     <MainSideBar parentRef={this.mainContentRef} />
                     <ErrorBoundary>
                         <PluginsView />

src/app/common/elements/termstyleblock.tsx

@@ -33,39 +33,12 @@ const VALID_CSS_VARIABLES = [
 
 @mobxReact.observer
 class TermStyleBlock extends React.Component<{
-    termTheme: TermThemeType;
+    themeName: string;
+    selector: string;
 }> {
     styleRules: OV<string> = mobx.observable.box("", { name: "StyleBlock-styleRules" });
     injectedStyleElement: HTMLStyleElement | null = null;
 
-    componentDidUpdate(): void {
-        const { termTheme } = this.props;
-        for (const key of Object.keys(termTheme)) {
-            const selector = this.getSelector(key);
-            if (selector) {
-                this.removeInjectedStyle();
-                this.loadThemeStyles(selector, termTheme[key]);
-                break;
-            }
-        }
-    }
-
-    getSelector(themeKey: string) {
-        const session = GlobalModel.getActiveSession();
-        const activeSessionId = session.sessionId;
-        const screen = GlobalModel.getActiveScreen();
-        const activeScreenId = screen.screenId;
-
-        if (themeKey == activeScreenId) {
-            return `.main-content [data-screenid="${activeScreenId}"]`;
-        } else if (themeKey == activeSessionId) {
-            return `.main-content [data-sessionid="${activeSessionId}"]`;
-        } else if (themeKey == "main") {
-            return ".main-content";
-        }
-        return null;
-    }
-
     isValidCSSColor(color) {
         const element = document.createElement("div");
         element.style.color = color;
@@ -101,11 +74,12 @@ class TermStyleBlock extends React.Component<{
                         .map(([key, value]) => `--term-${key}: ${value};`)
                         .join(" ");
 
-                    const style = document.createElement("style");
-                    style.innerHTML = `${selector} { ${styleProperties} }`;
-                    document.head.appendChild(style);
+                    const styleRules = `${selector} { ${styleProperties} }`;
+
+                    mobx.action(() => {
+                        this.styleRules.set(styleRules);
+                    })();
 
-                    this.injectedStyleElement = style;
                     console.log("loaded theme styles:", this.styleRules.get());
                 } else {
                     console.error("termThemeJson is not an object:", termThemeJson);
@@ -120,11 +94,10 @@ class TermStyleBlock extends React.Component<{
     }
 
     render() {
-        // To trigger componentDidUpdate when switching between sessions/screens
-        GlobalModel.getActiveSession();
-        GlobalModel.getActiveScreen();
+        const { themeName, selector } = this.props;
+        console.log("themeName:", themeName, "selector:", selector);
 
-        return null;
+        return this.styleRules.get() ? <style>{this.styleRules.get()}</style> : null;
     }
 }