diff --git a/src/models/model.ts b/src/models/model.ts
index 52b6bc48..75f7a830 100644
--- a/src/models/model.ts
+++ b/src/models/model.ts
@@ -372,6 +372,11 @@ class Model {
         return theme;
     }
 
+    isThemeDark(): boolean {
+        let cdata = this.clientData.get();
+        return cdata?.feopts?.theme != "light";
+    }
+
     getTermFontSize(): number {
         return this.termFontSize.get();
     }
diff --git a/src/plugins/code/code.less b/src/plugins/code/code.less
index fea97d69..6da14f5d 100644
--- a/src/plugins/code/code.less
+++ b/src/plugins/code/code.less
@@ -2,7 +2,7 @@
     .monaco-editor {
         .monaco-editor-background,
         .margin-view-overlays {
-            background-color: black !important;
+            background-color: var(--app-bg-color) !important;
         }
         .scrollbar {
             height: 4px !important;
diff --git a/src/plugins/code/code.tsx b/src/plugins/code/code.tsx
index f5963108..bb37221a 100644
--- a/src/plugins/code/code.tsx
+++ b/src/plugins/code/code.tsx
@@ -15,10 +15,11 @@ import { Button, Dropdown } from "@/elements";
 
 import "./code.less";
 
+// TODO: need to update these on theme change (pull from CSS vars)
 document.addEventListener("DOMContentLoaded", () => {
     loader.config({ paths: { vs: "./node_modules/monaco-editor/min/vs" } });
     loader.init().then(() => {
-        monaco.editor.defineTheme("wave-theme", {
+        monaco.editor.defineTheme("wave-theme-dark", {
             base: "hc-black",
             inherit: true,
             rules: [],
@@ -26,6 +27,15 @@ document.addEventListener("DOMContentLoaded", () => {
                 "editor.background": "#000000",
             },
         });
+
+        monaco.editor.defineTheme("wave-theme-light", {
+            base: "hc-light",
+            inherit: true,
+            rules: [],
+            colors: {
+                "editor.background": "#fefefe",
+            },
+        });
     });
 });
 
@@ -374,11 +384,13 @@ class SourceCodeRenderer extends React.Component<
     }
 
     getCodeEditor = () => {
+        let theme = GlobalModel.isThemeDark() ? "wave-theme-dark" : "wave-theme-light";
+        console.log("monaco theme", theme);
         return (
             <div className="editor-wrap" style={{ maxHeight: this.state.editorHeight }}>
                 {this.state.showReadonly && <div className="readonly">{"read-only"}</div>}
                 <Editor
-                    theme="wave-theme"
+                    theme={theme}
                     height={this.state.editorHeight}
                     defaultLanguage={this.state.selectedLanguage}
                     value={this.state.code}