From 90354cc3db1ef6e50baa67881461d636d19c7ebb Mon Sep 17 00:00:00 2001
From: sawka <mike@commandline.dev>
Date: Tue, 3 Dec 2024 10:56:38 -0800
Subject: [PATCH] add theme support

---
 frontend/app/element/termelem/termelem.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend/app/element/termelem/termelem.tsx b/frontend/app/element/termelem/termelem.tsx
index 736931188..3ee0a8cb6 100644
--- a/frontend/app/element/termelem/termelem.tsx
+++ b/frontend/app/element/termelem/termelem.tsx
@@ -2,11 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { PLATFORM } from "@/store/global";
+import { useAtomValueSafe } from "@/util/util";
 import { SerializeAddon } from "@xterm/addon-serialize";
 import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import * as TermTypes from "@xterm/xterm";
 import { Terminal } from "@xterm/xterm";
+import { Atom } from "jotai";
 import { useEffect, useRef } from "react";
 import { debounce } from "throttle-debounce";
 import { FitAddon } from "./fitaddon";
@@ -33,6 +35,7 @@ export type TermWrapOptions = {
     useWebGl?: boolean;
     useWebLinksAddon?: boolean;
     useSerializeAddon?: boolean;
+    termTheme: Atom<TermTypes.ITheme>;
     onOpenLink?: (uri: string) => void;
     onCwdChange?: (newCwd: string) => void;
     handleInputData?: (data: string) => void;
@@ -209,8 +212,18 @@ export class TermWrap {
 export const TermElem = (props: { termOpts: TermWrapOptions }) => {
     const connectElemRef = useRef<HTMLDivElement>(null);
     const termWrapRef = useRef<TermWrap>(null);
+    const termTheme = useAtomValueSafe(props.termOpts.termTheme);
+    useEffect(() => {
+        if (termWrapRef.current == null || termTheme == null) {
+            return;
+        }
+        termWrapRef.current.terminal.options.theme = termTheme;
+    }, [termTheme]);
     useEffect(() => {
         termWrapRef.current = new TermWrap(props.termOpts);
+        if (termTheme != null) {
+            termWrapRef.current.terminal.options.theme = termTheme;
+        }
         termWrapRef.current.initTerminal(connectElemRef.current);
         return () => {
             termWrapRef.current.dispose();