re-render terminal when theme is updated

fix validation
reload terminal when styel block is unmounted and mounted
2026-04-22 15:26:58 -07:00 · 2024-04-15 20:06:34 +08:00 · 2024-04-15 20:03:07 +08:00 · 2024-04-15 19:52:09 +08:00 · 2024-04-15 13:30:12 +08:00 · 2024-04-15 10:02:51 +08:00
20 changed files with 379 additions and 176 deletions
@@ -13,6 +13,7 @@
        <link rel="stylesheet" href="dist-dev/waveterm.css" />

        <link rel="stylesheet" id="theme-stylesheet" href="public/themes/themequery.css" />
+        <link rel="stylesheet" href="public/themes/test.css" />
    </head>
    <body>
        <div id="measure"></div>
@@ -20,8 +20,9 @@ import { MainSideBar } from "./sidebar/main";
 import { RightSideBar } from "./sidebar/right";
 import { DisconnectedModal, ClientStopModal } from "@/modals";
 import { ModalsProvider } from "@/modals/provider";
-import { Button } from "@/elements";
+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();
@@ -124,9 +140,12 @@ class App extends React.Component<{}, {}> {
        const rightSidebarCollapsed = GlobalModel.rightSidebarModel.getCollapsed();
        const activeMainView = GlobalModel.activeMainView.get();
        const lightDarkClass = GlobalModel.isDarkTheme.get() ? "is-dark" : "is-light";
+        const termTheme = GlobalModel.getTermTheme();
+        const themeKey = null;
+
        return (
            <div
-                key={"version-" + renderVersion}
+                key={`version- + ${renderVersion}`}
                id="main"
                className={cn(
                    "platform-" + platform,
@@ -151,6 +170,13 @@ class App extends React.Component<{}, {}> {
                    </div>
                </If>
                <div ref={this.mainContentRef} className="main-content">
+                    <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 />
@@ -76,14 +76,13 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove

    @boundMethod
    handleChangeTermTheme(theme: string): void {
-        // For global terminal theme, the key is global, otherwise it's either
+        // For main terminal theme, the key is main, otherwise it's either
        // sessionId or screenId.
-        const currTheme = GlobalModel.getTermTheme()["global"];
+        const currTheme = GlobalModel.getTermTheme()["main"];
        if (currTheme == theme) {
            return;
        }
-
-        const prtn = GlobalCommandRunner.setGlobalTermTheme(theme, false);
+        const prtn = GlobalCommandRunner.setMainTermTheme(theme, false);
        commandRtnHandler(prtn, this.errorMessage);
    }

@@ -207,8 +206,8 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
        const curFontSize = GlobalModel.getTermFontSize();
        const curFontFamily = GlobalModel.getTermFontFamily();
        const curTheme = GlobalModel.getThemeSource();
-        const termThemes = getTermThemes(GlobalModel.termThemes, "Wave Default");
-        const currTermTheme = GlobalModel.getTermTheme()["global"] ?? termThemes[0].label;
+        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get(), "Wave Default");
+        const currTermTheme = GlobalModel.getTermTheme()["main"] ?? termThemes[0].label;

        return (
            <MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
@@ -5,7 +5,7 @@
    width: 100%;
    border: 2px solid var(--form-element-border-color);
    border-radius: 6px;
-    line-height: 22px;
+    line-height: 20px;
    background: var(--form-element-bg-color);

    &.no-label {
@@ -18,4 +18,5 @@ export { Toggle } from "./toggle";
 export { Tooltip } from "./tooltip";
 export { TabIcon } from "./tabicon";
 export { DatePicker } from "./datepicker";
+export { TermStyleBlock } from "./termstyleblock";
 export { CopyButton } from "./copybutton";
@@ -0,0 +1,95 @@
+// Copyright 2023, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import { GlobalModel } from "@/models";
+
+const VALID_CSS_VARIABLES = [
+    "--term-black",
+    "--term-red",
+    "--term-green",
+    "--term-yellow",
+    "--term-blue",
+    "--term-magenta",
+    "--term-cyan",
+    "--term-white",
+    "--term-bright-black",
+    "--term-bright-red",
+    "--term-bright-green",
+    "--term-bright-yellow",
+    "--term-bright-blue",
+    "--term-bright-magenta",
+    "--term-bright-cyan",
+    "--term-bright-white",
+    "--term-gray",
+    "--term-cmdtext",
+    "--term-foreground",
+    "--term-background",
+    "--term-selection-background",
+    "--term-cursor-accent",
+];
+
+@mobxReact.observer
+class TermStyleBlock extends React.Component<{
+    themeName: string;
+    selector: string;
+}> {
+    componentDidMount() {
+        GlobalModel.bumpTermRenderVersion();
+    }
+
+    componentWillUnmount() {
+        GlobalModel.bumpTermRenderVersion();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.themeName !== this.props.themeName || prevProps.selector !== this.props.selector) {
+            GlobalModel.bumpTermRenderVersion();
+        }
+    }
+
+    isValidCSSColor(color) {
+        const element = document.createElement("div");
+        element.style.color = color;
+        return element.style.color !== "";
+    }
+
+    camelCaseToKebabCase(str) {
+        return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+    }
+
+    getStyleRules() {
+        const { selector, themeName } = this.props;
+        const termThemeOptions = GlobalModel.getTermThemeOptions();
+        if (!termThemeOptions) {
+            return null;
+        }
+        const theme = termThemeOptions[themeName];
+        if (!theme) {
+            return null;
+        }
+        const styleProperties = Object.entries(theme)
+            .filter(([key, value]) => {
+                const cssVarName = `--term-${this.camelCaseToKebabCase(key)}`;
+                return VALID_CSS_VARIABLES.includes(cssVarName) && this.isValidCSSColor(value);
+            })
+            .map(([key, value]) => `--term-${key}: ${value};`)
+            .join(" ");
+
+        if (!styleProperties) {
+            return null;
+        }
+        return `${selector} { ${styleProperties} }`;
+    }
+
+    render() {
+        const styleRules = this.getStyleRules();
+        if (!styleRules) {
+            return null;
+        }
+        return <style>{styleRules}</style>;
+    }
+}
+
+export { TermStyleBlock };
@@ -160,6 +160,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
        if (currTheme == theme) {
            return;
        }
+        GlobalModel.setTermThemeScope(this.screenId, `.main-content [data-screenid="${this.screenId}"]`);
        const prtn = GlobalCommandRunner.setScreenTermTheme(this.screenId, theme, false);
        commandRtnHandler(prtn, this.errorMessage);
    }
@@ -175,13 +176,8 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
        if (screen == null) {
            return null;
        }
-        let color: string = null;
-        let icon: string = null;
-        let index: number = 0;
-        const curRemote = GlobalModel.getRemote(GlobalModel.getActiveScreen().getCurRemoteInstance().remoteid);
        const termThemes = getTermThemes(GlobalModel.termThemes);
        const currTermTheme = GlobalModel.getTermTheme()[this.screenId] ?? termThemes[0].label;
-
        return (
            <Modal className="screen-settings-modal">
                <Modal.Header onClose={this.closeModal} title={`Tab Settings (${screen.name.get()})`} />
@@ -99,7 +99,7 @@ class SessionSettingsModal extends React.Component<{}, {}> {
        if (this.session == null) {
            return null;
        }
-        const termThemes = getTermThemes(GlobalModel.termThemes);
+        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get());
        const currTermTheme = GlobalModel.getTermTheme()[this.sessionId] ?? termThemes[0].label;

        return (
@@ -649,11 +649,6 @@ class LineContainer extends React.Component<{ historyId: string; width: number }
        this.line = hvm.getLineById(this.historyItem.lineid);
    }

-    componentDidMount(): void {
-        GlobalModel.bumpTermRenderVersion();
-        GlobalModel.termThemeSrcEl.set(null);
-    }
-
    @boundMethod
    handleHeightChange(lineNum: number, newHeight: number, oldHeight: number): void {
        return;
@@ -12,7 +12,7 @@ import { debounce } from "throttle-debounce";
 import dayjs from "dayjs";
 import { GlobalCommandRunner, ForwardLineContainer, GlobalModel, ScreenLines, Screen, Session } from "@/models";
 import localizedFormat from "dayjs/plugin/localizedFormat";
-import { Button } from "@/elements";
+import { Button, TermStyleBlock } from "@/elements";
 import { Line } from "@/app/line/linecomps";
 import { LinesView } from "@/app/line/linesview";
 import * as util from "@/util/util";
@@ -184,10 +184,18 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
            winWidth = screenWidth - realWidth + "px";
            sidebarWidth = realWidth - MagicLayout.ScreenSidebarWidthPadding + "px";
        }
+        const termRenderVersion = GlobalModel.termRenderVersion.get();
+
        return (
-            <div className="screen-view" data-screenid={screen.screenId} ref={this.screenViewRef}>
+            <div className="screen-view" id={screen.screenId} data-screenid={screen.screenId} ref={this.screenViewRef}>
+                {/* <TermStyleBlock
+                    scope="screen"
+                    termTheme={termTheme}
+                    themeSrcEl={this.screenViewRef.current}
+                    themeKey={screen.screenId}
+                /> */}
                <ScreenWindowView
-                    key={screen.screenId + ":" + fontSize + ":" + dprStr}
+                    key={screen.screenId + ":" + fontSize + ":" + dprStr + ":" + termRenderVersion}
                    session={session}
                    screen={screen}
                    width={winWidth}
@@ -187,4 +187,8 @@
            }
        }
    }
+
+    .terminal-theme-dropdown {
+        width: 412px;
+    }
 }
@@ -15,7 +15,7 @@ import { ScreenTabs } from "./screen/tabs";
 import { ErrorBoundary } from "@/common/error/errorboundary";
 import { boundMethod } from "autobind-decorator";
 import type { Screen } from "@/models";
-import { Button } from "@/elements";
+import { Button, TermStyleBlock } from "@/elements";
 import { commandRtnHandler } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
 import { Dropdown } from "@/elements/dropdown";
@@ -140,6 +140,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {

    @boundMethod
    handleChangeTermTheme(theme: string): void {
+        console.log("theme", theme);
        const { screenId } = this.props.screen;
        const currTheme = GlobalModel.getTermTheme()[screenId];
        if (currTheme == theme) {
@@ -152,7 +153,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
    render() {
        const { screen } = this.props;
        const rptr = screen.curRemote.get();
-        const termThemes = getTermThemes(GlobalModel.termThemes);
+        const termThemes = getTermThemes(GlobalModel.termThemeOptions.get());
        const currTermTheme = GlobalModel.getTermTheme()[screen.screenId] ?? termThemes[0].label;
        return (
            <div className="newtab-container">
@@ -175,6 +176,7 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
                <If condition={termThemes.length > 0}>
                    <div className="newtab-section">
                        <Dropdown
+                            label="Terminal Theme"
                            className="terminal-theme-dropdown"
                            options={termThemes}
                            defaultValue={currTermTheme}
@@ -208,59 +210,6 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
@mobxReact.observer
 class WorkspaceView extends React.Component<{}, {}> {
    sessionRef = React.createRef<HTMLDivElement>();
-    theme: string;
-    themeReactionDisposer: mobx.IReactionDisposer;
-
-    componentDidMount() {
-        this.setupThemeReaction();
-    }
-
-    componentDidUpdate() {
-        this.setupThemeReaction();
-    }
-
-    setupThemeReaction() {
-        if (this.themeReactionDisposer) {
-            this.themeReactionDisposer();
-        }
-
-        // This handles session and screen-level terminal theming.
-        // Ideally, screen-level theming should be handled in the inner-level component, but
-        // the frequent mounting and unmounting of the screen view make it really difficult to work.
-        this.themeReactionDisposer = mobx.reaction(
-            () => {
-                return {
-                    termTheme: GlobalModel.getTermTheme(),
-                    session: GlobalModel.getActiveSession(),
-                    screen: GlobalModel.getActiveScreen(),
-                };
-            },
-            ({ termTheme, session, screen }) => {
-                let currTheme = termTheme[session.sessionId];
-                if (termTheme[screen.screenId]) {
-                    currTheme = termTheme[screen.screenId];
-                }
-                if (session && currTheme !== this.theme && this.sessionRef.current) {
-                    const reset = currTheme == null;
-                    const theme = currTheme ?? this.theme;
-                    const themeSrcEl = reset ? null : this.sessionRef.current;
-                    const rtn = GlobalModel.updateTermTheme(this.sessionRef.current, theme, reset);
-                    rtn.then(() => {
-                        GlobalModel.termThemeSrcEl.set(themeSrcEl);
-                    }).then(() => {
-                        GlobalModel.bumpTermRenderVersion();
-                    });
-                    this.theme = currTheme;
-                }
-            }
-        );
-    }
-
-    componentWillUnmount() {
-        if (this.themeReactionDisposer) {
-            this.themeReactionDisposer();
-        }
-    }

    @boundMethod
    toggleTabSettings() {
@@ -277,15 +226,14 @@ class WorkspaceView extends React.Component<{}, {}> {
            sessionId = session.sessionId;
            activeScreen = session.getActiveScreen();
        }
-
        const isHidden = GlobalModel.activeMainView.get() != "session";
        const mainSidebarModel = GlobalModel.mainSidebarModel;
-        const termRenderVersion = GlobalModel.termRenderVersion.get();
        const showTabSettings = GlobalModel.tabSettingsOpen.get();
        return (
            <div
                ref={this.sessionRef}
                className={cn("mainview", "session-view", { "is-hidden": isHidden })}
+                id={sessionId}
                data-sessionid={sessionId}
                style={{
                    width: `${window.innerWidth - mainSidebarModel.getWidth()}px`,
@@ -307,11 +255,7 @@ class WorkspaceView extends React.Component<{}, {}> {
                    </div>
                </If>
                <ErrorBoundary key="eb">
-                    <ScreenView
-                        key={`screenview-${sessionId}-${termRenderVersion}`}
-                        session={session}
-                        screen={activeScreen}
-                    />
+                    <ScreenView key={`screenview-${sessionId}`} session={session} screen={activeScreen} />
                    <If condition={activeScreen != null}>
                        <CmdInput key={"cmdinput-" + sessionId} />
                    </If>
@@ -377,7 +377,7 @@ class CommandRunner {
        return GlobalModel.submitCommand("client", "set", null, kwargs, interactive);
    }

-    setGlobalTermTheme(theme: string, interactive: boolean): Promise<CommandRtnType> {
+    setMainTermTheme(theme: string, interactive: boolean): Promise<CommandRtnType> {
        let kwargs = {
            nohist: "1",
            termtheme: theme,
@@ -386,7 +386,6 @@ class CommandRunner {
    }

    setSessionTermTheme(sessionId: string, name: string, interactive: boolean): Promise<CommandRtnType> {
-        console.log("setSessionTermTheme-------");
        let kwargs = {
            nohist: "1",
            id: sessionId,
@@ -32,7 +32,7 @@ import { MainSidebarModel } from "./mainsidebar";
 import { RightSidebarModel } from "./rightsidebar";
 import { Screen } from "./screen";
 import { Cmd } from "./cmd";
-import { GlobalCommandRunner } from "./global";
+import { GlobalCommandRunner, GlobalModel } from "./global";
 import { clearMonoFontCache, getMonoFontSize } from "@/util/textmeasure";
 import type { TermWrap } from "@/plugins/terminal/term";
 import * as util from "@/util/util";
@@ -135,22 +135,16 @@ class Model {
    renderVersion: OV<number> = mobx.observable.box(0, {
        name: "renderVersion",
    });
-
    appUpdateStatus = mobx.observable.box(getApi().getAppUpdateStatus(), {
        name: "appUpdateStatus",
    });
-
-    termThemes: OMap<string, string> = mobx.observable.array([], {
+    termThemeOptions: OV<TermThemeOptionsType> = mobx.observable.box(null, {
        name: "terminalThemes",
        deep: false,
    });
-    termThemeSrcEl: OV<HTMLElement> = mobx.observable.box(null, {
-        name: "termThemeSrcEl",
-    });
    termRenderVersion: OV<number> = mobx.observable.box(0, {
        name: "termRenderVersion",
    });
-    currGlobalTermTheme: string;

    private constructor() {
        this.clientId = getApi().getId();
@@ -164,7 +158,6 @@ class Model {
        this.ws.reconnect();
        this.keybindManager = new KeybindManager(this);
        this.readConfigKeybindings();
-        this.fetchTerminalThemes();
        this.initSystemKeybindings();
        this.initAppKeybindings();
        this.inputModel = new InputModel(this);
@@ -236,42 +229,6 @@ class Model {
        }
    }

-    fetchTerminalThemes() {
-        const url = new URL(this.getBaseHostPort() + "/config/terminal-themes");
-        fetch(url, { method: "get", body: null, headers: this.getFetchHeaders() })
-            .then((resp) => {
-                if (resp.status == 404) {
-                    return [];
-                } else if (!resp.ok) {
-                    util.handleNotOkResp(resp, url);
-                }
-                return resp.json();
-            })
-            .then((themes) => {
-                const tt = themes.map((theme) => theme.name.split(".")[0]);
-                this.termThemes.replace(tt);
-            });
-    }
-
-    updateTermTheme(element: HTMLElement, themeFileName: string, reset: boolean) {
-        const url = new URL(this.getBaseHostPort() + `/config/terminal-themes/${themeFileName}.json`);
-        return fetch(url, { method: "get", body: null, headers: this.getFetchHeaders() })
-            .then((resp) => resp.json())
-            .then((themeVars: TermThemeType) => {
-                Object.keys(themeVars).forEach((key) => {
-                    if (reset) {
-                        this.resetStyleVar(element, `--term-${key}`);
-                    } else {
-                        this.resetStyleVar(element, `--term-${key}`);
-                        this.setStyleVar(element, `--term-${key}`, themeVars[key]);
-                    }
-                });
-            })
-            .catch((error) => {
-                console.error(`error applying theme: ${themeFileName}`, error);
-            });
-    }
-
    bumpTermRenderVersion() {
        mobx.action(() => {
            this.termRenderVersion.set(this.termRenderVersion.get() + 1);
@@ -926,6 +883,17 @@ class Model {
        }
    }

+    setTermThemeOptions(termThemeOptions: TermThemeOptionsType) {
+        mobx.action(() => {
+            this.termThemeOptions.set(termThemeOptions);
+        })();
+        GlobalModel.bumpTermRenderVersion();
+    }
+
+    getTermThemeOptions(): TermThemeOptionsType {
+        return this.termThemeOptions.get();
+    }
+
    updateScreenStatusIndicators(screenStatusIndicators: ScreenStatusIndicatorUpdateType[]) {
        for (const update of screenStatusIndicators) {
            this.getScreenById_single(update.screenid)?.setStatusIndicator(update.status);
@@ -1045,6 +1013,8 @@ class Model {
                } else if (update.userinputrequest != null) {
                    const userInputRequest: UserInputRequest = update.userinputrequest;
                    this.modalsModel.pushModal(appconst.USER_INPUT, userInputRequest);
+                } else if (update.termthemeoptions != null) {
+                    this.setTermThemeOptions(update.termthemeoptions);
                } else if (update.sessiontombstone != null || update.screentombstone != null) {
                    // nothing (ignore)
                } else {
@@ -1091,7 +1061,7 @@ class Model {
                const activeScreen = this.getActiveScreen();
                if (activeScreen?.getCurRemoteInstance() != null) {
                    setTimeout(() => {
-                        GlobalCommandRunner.syncShellState();
+                        // GlobalCommandRunner.syncShellState();
                    }, 100);
                }
            }
@@ -1298,9 +1268,6 @@ class Model {
            newTheme = appconst.DefaultTheme;
        }
        const themeUpdated = newTheme != this.getThemeSource();
-        const oldTermTheme = this.getTermTheme();
-        const newTermTheme = clientData?.feopts?.termtheme;
-        const ttUpdated = this.termThemeUpdated(newTermTheme, oldTermTheme);
        mobx.action(() => {
            this.clientData.set(clientData);
        })();
@@ -1321,36 +1288,6 @@ class Model {
            getApi().setNativeThemeSource(newTheme);
            this.bumpRenderVersion();
        }
-        // Only for global terminal theme. For session and screen terminal theme,
-        // they are handled in workspace view.
-        if (newTermTheme) {
-            const el = document.documentElement;
-            const globaltt = newTermTheme["global"] ?? this.currGlobalTermTheme;
-            const reset = newTermTheme["global"] == null;
-            if (globaltt) {
-                const rtn = this.updateTermTheme(el, globaltt, reset);
-                rtn.then(() => {
-                    if (ttUpdated) {
-                        this.bumpTermRenderVersion();
-                    }
-                });
-                this.currGlobalTermTheme = globaltt;
-            }
-        }
-    }
-
-    termThemeUpdated(newTermTheme, oldTermTheme) {
-        for (const key in oldTermTheme) {
-            if (!(key in newTermTheme)) {
-                return true;
-            }
-        }
-        for (const key in newTermTheme) {
-            if (!oldTermTheme[key] || oldTermTheme[key] !== newTermTheme[key]) {
-                return true;
-            }
-        }
-        return false;
    }

    submitCommandPacket(cmdPk: FeCmdPacketType, interactive: boolean): Promise<CommandRtnType> {
@@ -51,10 +51,11 @@ type TermWrapOpts = {
    onUpdateContentHeight: (termContext: RendererContext, height: number) => void;
 };

-function getThemeFromCSSVars(themeSrcEl: HTMLElement): ITheme {
+function getThemeFromCSSVars(el: Element): ITheme {
    const theme: ITheme = {};
-    const tse = themeSrcEl ?? document.documentElement;
-    let rootStyle = getComputedStyle(tse);
+    // console.log("el======", el);
+    const rootStyle = getComputedStyle(el);
+    // console.log("rootStyle======", rootStyle.getPropertyValue("--term-foreground"));
    theme.foreground = rootStyle.getPropertyValue("--term-foreground");
    theme.background = rootStyle.getPropertyValue("--term-background");
    theme.black = rootStyle.getPropertyValue("--term-black");
@@ -131,8 +132,7 @@ class TermWrap {
            let cols = windowWidthToCols(opts.winSize.width, opts.fontSize);
            this.termSize = { rows: opts.termOpts.rows, cols: cols };
        }
-        const themeSrcEl = GlobalModel.termThemeSrcEl.get();
-        let theme = getThemeFromCSSVars(themeSrcEl);
+        let theme = getThemeFromCSSVars(this.connectedElem);
        this.terminal = new Terminal({
            rows: this.termSize.rows,
            cols: this.termSize.cols,
@@ -379,6 +379,13 @@ declare global {
        userinputrequest?: UserInputRequest;
        screentombstone?: any;
        sessiontombstone?: any;
+        termthemeoptions?: TermThemeOptionsType;
+    };
+
+    type TermThemeOptionsType = {
+        [key: string]: {
+            [innerKey: string]: string;
+        };
    };

    type HistoryViewDataType = {
@@ -582,7 +589,7 @@ declare global {
        termfontsize: number;
        termfontfamily: string;
        theme: NativeThemeSource;
-        termtheme: TermThemeType;
+        termthemeconfig: TermThemeType;
    };

    type ConfirmFlagsType = {
@@ -1,10 +1,13 @@
-function getTermThemes(termThemes: string[], noneLabel = "Inherit"): DropdownItem[] {
+function getTermThemes(termThemeOptions: string[], noneLabel = "Inherit"): DropdownItem[] {
+    if (!termThemeOptions) {
+        return [];
+    }
    const tt: DropdownItem[] = [];
    tt.push({
        label: noneLabel,
        value: null,
    });
-    for (const themeName of termThemes) {
+    for (const themeName of Object.keys(termThemeOptions)) {
        tt.push({
            label: themeName,
            value: themeName,
@@ -37,6 +37,7 @@ import (
 	"github.com/wavetermdev/waveterm/waveshell/pkg/wlog"
 	"github.com/wavetermdev/waveterm/wavesrv/pkg/bufferedpipe"
 	"github.com/wavetermdev/waveterm/wavesrv/pkg/cmdrunner"
+	"github.com/wavetermdev/waveterm/wavesrv/pkg/configstore"
 	"github.com/wavetermdev/waveterm/wavesrv/pkg/ephemeral"
 	"github.com/wavetermdev/waveterm/wavesrv/pkg/pcloud"
 	"github.com/wavetermdev/waveterm/wavesrv/pkg/promptenc"
@@ -156,6 +157,9 @@ func HandleWs(w http.ResponseWriter, r *http.Request) {
 		removeWSStateAfterTimeout(clientId, stateConnectTime, WSStateReconnectTime)
 	}()
 	log.Printf("WebSocket opened %s %s\n", state.ClientId, shell.RemoteAddr)
+
+	tt := configstore.MakeTermThemes(state)
+	tt.LoadAndWatchThemes()
 	state.RunWSRead()
 }

@@ -5814,9 +5814,9 @@ func ClientSetCommand(ctx context.Context, pk *scpacket.FeCommandPacketType) (sc
 			feOpts.TermTheme = make(map[string]string)
 		}
 		if termthemeStr == "" {
-			delete(feOpts.TermTheme, "global")
+			delete(feOpts.TermTheme, "main")
 		} else {
-			feOpts.TermTheme["global"] = termthemeStr
+			feOpts.TermTheme["main"] = termthemeStr
 		}
 		err = sstore.UpdateClientFeOpts(ctx, feOpts)
 		if err != nil {
@@ -0,0 +1,184 @@
+package configstore
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"log"
+	"os"
+	"path"
+	"path/filepath"
+
+	"github.com/fsnotify/fsnotify"
+	"github.com/wavetermdev/waveterm/wavesrv/pkg/scbase"
+	"github.com/wavetermdev/waveterm/wavesrv/pkg/scbus"
+	"github.com/wavetermdev/waveterm/wavesrv/pkg/scws"
+)
+
+const (
+	TermThemesTypeStr = "termthemeoptions"
+	TermThemeDir      = "config/terminal-themes/"
+)
+
+type TermThemesType map[string]map[string]string
+
+func (tt TermThemesType) GetType() string {
+	return TermThemesTypeStr
+}
+
+type TermThemes struct {
+	Themes TermThemesType
+	State  *scws.WSState // Using WSState to manage WebSocket operations
+}
+
+// Factory function to create a new TermThemes instance with WSState.
+func MakeTermThemes(state *scws.WSState) *TermThemes {
+	return &TermThemes{
+		Themes: make(TermThemesType),
+		State:  state,
+	}
+}
+
+// LoadAndWatchThemes initializes file scanning and sets up file watching.
+func (t *TermThemes) LoadAndWatchThemes() {
+	dirPath := path.Join(scbase.GetWaveHomeDir(), TermThemeDir)
+	if _, err := os.Stat(dirPath); errors.Is(err, os.ErrNotExist) {
+		log.Printf("directory does not exist: %s", dirPath)
+		return
+	}
+
+	if err := t.scanDirAndUpdate(dirPath); err != nil {
+		log.Printf("failed to scan directory and update themes: %v", err)
+		return
+	}
+
+	t.setupFileWatcher(dirPath)
+}
+
+// scanDirAndUpdate scans the directory and updates themes.
+func (t *TermThemes) scanDirAndUpdate(dirPath string) error {
+	log.Println("performing directory scan...")
+	newThemes, err := t.scanDir(dirPath)
+	if err != nil {
+		return err
+	}
+
+	t.Themes = newThemes
+	return t.updateThemes()
+}
+
+// scanDir reads all JSON files in the specified directory.
+func (t *TermThemes) scanDir(dirPath string) (TermThemesType, error) {
+	newThemes := make(TermThemesType)
+
+	files, err := os.ReadDir(dirPath)
+	if err != nil {
+		return nil, err
+	}
+
+	for _, file := range files {
+		if filepath.Ext(file.Name()) == ".json" {
+			filePath := filepath.Join(dirPath, file.Name())
+			content, err := t.readFileContents(filePath)
+			if err != nil {
+				log.Printf("error reading file %s: %v", filePath, err)
+				continue
+			}
+			newThemes[file.Name()] = content
+		}
+	}
+
+	return newThemes, nil
+}
+
+// setupFileWatcher sets up a file system watcher on the given directory.
+func (t *TermThemes) setupFileWatcher(dirPath string) {
+	watcher, err := fsnotify.NewWatcher()
+	if err != nil {
+		log.Println("error creating file watcher:", err)
+		return
+	}
+	go func() {
+		defer func() {
+			watcher.Close()
+			log.Println("file watcher stopped.")
+		}()
+		for {
+			select {
+			case event, ok := <-watcher.Events:
+				if !ok {
+					return
+				}
+				log.Printf("event: %s, Op: %v", event.Name, event.Op)
+				t.handleFileEvent(event)
+			case err, ok := <-watcher.Errors:
+				if !ok {
+					return
+				}
+				log.Println("watcher error:", err)
+			}
+		}
+	}()
+
+	if err := watcher.Add(dirPath); err != nil {
+		log.Println("error adding directory to watcher:", err)
+	}
+}
+
+// handleFileEvent handles file system events and triggers a directory rescan only on rename events.
+func (t *TermThemes) handleFileEvent(event fsnotify.Event) {
+	filePath := event.Name
+	fileName := filepath.Base(filePath)
+
+	// Normalize the file path for consistency across platforms
+	normalizedPath := filepath.ToSlash(filePath)
+
+	switch event.Op {
+	case fsnotify.Write, fsnotify.Create:
+		log.Println("performing write or create event...")
+		// For write and create events, update or add the file to the Themes map.
+		content, err := t.readFileContents(normalizedPath)
+		if err != nil {
+			log.Printf("error reading file %s: %v", normalizedPath, err)
+			return
+		}
+		t.Themes[fileName] = content
+		t.updateThemes() // Update themes after adding or changing the file.
+
+	case fsnotify.Remove:
+		log.Println("performing delete event...")
+		// For remove events, delete the file from the Themes map.
+		delete(t.Themes, fileName)
+		t.updateThemes() // Update themes after removing the file.
+
+	case fsnotify.Rename:
+		// Rename might affect file identity; rescan to ensure accuracy
+		log.Printf("rename event detected, rescanning directory: %s", normalizedPath)
+		if err := t.scanDirAndUpdate(path.Dir(normalizedPath)); err != nil {
+			log.Printf("error rescanning directory after rename: %v", err)
+		}
+	}
+}
+
+// readFileContents reads and unmarshals the JSON content from a file.
+func (t *TermThemes) readFileContents(filePath string) (map[string]string, error) {
+	data, err := os.ReadFile(filePath)
+	if err != nil {
+		return nil, err
+	}
+	var content map[string]string
+	if err := json.Unmarshal(data, &content); err != nil {
+		return nil, err
+	}
+	return content, nil
+}
+
+// updateThemes sends an update of all themes via WebSocket.
+func (t *TermThemes) updateThemes() error {
+	update := scbus.MakeUpdatePacket()
+	update.AddUpdate(t.Themes)
+	if err := t.State.WriteUpdate(update); err != nil {
+		return fmt.Errorf("error sending updated themes via WebSocket: %v", err)
+	}
+	return nil
+}
Author	SHA1	Message	Date
Red Adaya	80e1e3ce55	re-render terminal when theme is updated	2024-04-15 20:06:34 +08:00
Red Adaya	85886afeb4	fix validation	2024-04-15 20:03:07 +08:00
Red Adaya	567e5b662c	reload terminal when styel block is unmounted and mounted	2024-04-15 19:52:09 +08:00
Red Adaya	6b5d2833eb	use themes coming from backend	2024-04-15 13:30:12 +08:00
Red Adaya	b10910d229	make methods cohesive	2024-04-15 10:02:51 +08:00
Red Adaya	a7e6224862	use UpdatePacket for theme changes as well	2024-04-14 23:07:51 +08:00
Red Adaya	5476b45f22	save work	2024-04-14 22:42:00 +08:00
Red Adaya	efcd8ad03a	save work	2024-04-12 14:57:42 +08:00
Red Adaya	03acda07b5	cleanup	2024-04-11 22:34:26 +08:00
Red Adaya	32342629c8	trigger componentDidUpdate when switching tabs and sessions	2024-04-11 22:27:46 +08:00
Red Adaya	d2ddf7bc58	working	2024-04-11 22:02:53 +08:00
Red Adaya	01fb217785	save work	2024-04-11 21:55:55 +08:00
Red Adaya	e5d3db7631	save work	2024-04-11 17:35:32 +08:00
Red Adaya	c24e99e9ff	save work	2024-04-11 14:31:34 +08:00
Red Adaya	65cab8a59a	add label to tab settings terminal theme dropdown	2024-04-10 14:58:53 +08:00
Red Adaya	c737c9df57	add key and value validation	2024-04-10 10:14:33 +08:00
Red Adaya	17cc4769af	fix issue where line in history view doesn't reflect the terminal theme	2024-04-10 09:21:13 +08:00
Red Adaya	b4d04c3a57	merge main	2024-04-10 09:09:34 +08:00
Red Adaya	5e4eb738b3	remove file from another branch	2024-04-04 22:02:07 +08:00
Red Adaya	936e9fa7b4	cleanup	2024-04-04 11:15:38 +08:00
Red Adaya	af6486e8bb	remove old implementation	2024-04-04 11:11:08 +08:00
Red Adaya	1038a08789	revert changes in tabs2.less	2024-04-04 11:09:32 +08:00
Red Adaya	7a377c4a2a	loadThemeStyles doesn't have to be async	2024-04-04 11:08:04 +08:00
Red Adaya	8afa62fff2	cleanup	2024-04-04 11:04:34 +08:00
Red Adaya	97595a7718	working	2024-04-04 11:02:27 +08:00
Red Adaya	e4d353b5c1	remove selector prop from StyleBlock	2024-04-04 07:34:38 +08:00
Red Adaya	2462c64793	selector should always be :root	2024-04-04 07:33:10 +08:00
Red Adaya	b451ee1ef9	change prop from classname to selector	2024-04-04 07:21:26 +08:00
Red Adaya	2c64668382	ability to inherit root styles	2024-04-03 22:22:05 +08:00
Red Adaya	de21303fb1	root level	2024-04-03 22:12:48 +08:00
Red Adaya	f6cdd53fd4	StyleBlock in elements dir	2024-04-03 20:50:47 +08:00
Red Adaya	840b69d100	reusable StyleBlock component	2024-04-03 20:48:13 +08:00
Red Adaya	683c66f386	save work	2024-04-03 16:37:15 +08:00