1 files changed, 8 insertions, 2 deletions

diff --git a/renderer/src/components/DocumentPane.tsx b/renderer/src/components/DocumentPane.tsx
index c5f456c..f5368b3 100644
--- a/renderer/src/components/DocumentPane.tsx
+++ b/renderer/src/components/DocumentPane.tsx
@@ -5,6 +5,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from "@codemirror/view";
 import { markdown } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
+import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { oneDark } from "@codemirror/theme-one-dark";
 import type { Phase } from "../types";
@@ -15,16 +16,19 @@ interface DocumentPaneProps {
   phase: Phase;
   disabled: boolean;
   showOnboarding?: boolean;
+  theme: "dark" | "light";
 }
 
 function MarkdownEditor({
   content,
   onChange,
   disabled,
+  theme,
 }: {
   content: string;
   onChange: (content: string) => void;
   disabled: boolean;
+  theme: "dark" | "light";
 }) {
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
@@ -47,7 +51,7 @@ function MarkdownEditor({
         history(),
         keymap.of([...defaultKeymap, ...historyKeymap]),
         markdown({ codeLanguages: languages }),
-        oneDark,
+        theme === "dark" ? oneDark : syntaxHighlighting(defaultHighlightStyle),
         updateListener,
         EditorView.editable.of(!disabled),
         EditorView.lineWrapping,
@@ -81,7 +85,7 @@ function MarkdownEditor({
       view.destroy();
       viewRef.current = null;
     };
-  }, [disabled]);
+  }, [disabled, theme]);
 
   // Update content when it changes externally
   useEffect(() => {
@@ -109,6 +113,7 @@ export function DocumentPane({
   phase,
   disabled,
   showOnboarding,
+  theme,
 }: DocumentPaneProps) {
   const [isEditing, setIsEditing] = useState(false);
 
@@ -211,6 +216,7 @@ export function DocumentPane({
           content={content}
           onChange={onChange}
           disabled={disabled}
+          theme={theme}
         />
       ) : (
         <div