diff --git a/frontend/app/view/term/termtheme.ts b/frontend/app/view/term/termtheme.ts
index 1ea7631bdd..141304c3a1 100644
--- a/frontend/app/view/term/termtheme.ts
+++ b/frontend/app/view/term/termtheme.ts
@@ -20,8 +20,8 @@ const TermThemeUpdater = ({ blockId, model, termRef }: TermThemeProps) => {
     const transparency = useAtomValue(model.termTransparencyAtom);
     const [theme, _] = computeTheme(fullConfig, blockTermTheme, transparency);
     useEffect(() => {
-        if (termRef.current?.terminal) {
-            termRef.current.terminal.options.theme = theme;
+        if (termRef.current != null) {
+            termRef.current.setTheme(theme);
         }
     }, [theme]);
     return null;
diff --git a/frontend/app/view/term/termwrap.ts b/frontend/app/view/term/termwrap.ts
index d10b600459..74c60a8ad5 100644
--- a/frontend/app/view/term/termwrap.ts
+++ b/frontend/app/view/term/termwrap.ts
@@ -336,6 +336,14 @@ export class TermWrap {
         this.terminal.options.cursorBlink = cursorBlink ?? false;
     }
 
+    setTheme(theme: TermTypes.ITerminalOptions["theme"]) {
+        if (typeof (this.terminal as any).setOption === "function") {
+            (this.terminal as any).setOption("theme", theme);
+        } else {
+            this.terminal.options.theme = theme;
+        }
+    }
+
     setTermRenderer(renderer: "webgl" | "dom") {
         if (renderer === "webgl") {
             if (this.webglAddon != null) {