From a9ae7c65c387bcf144de8df0a13dbbfd7496cc1e Mon Sep 17 00:00:00 2001
From: Clawd <ai@clawd.bot>
Date: Sat, 28 Feb 2026 15:21:27 -0800
Subject: Restyle UI with light/dark theme support

- Add light/dark theme toggle with localStorage persistence
- Add 'Claude Flow' wordmark in header
- Switch to monospace font (SF Mono, Cascadia Code, etc.)
- Update accent colors (lighter blue)
- Add theme-aware CodeMirror styling (oneDark vs defaultHighlightStyle)
- Update window title to 'Claude Flow'
- Refine spacing and visual polish throughout
- Add .claude-flow/ artifacts from self-restyling session
---
 renderer/src/components/DocumentPane.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'renderer/src/components/DocumentPane.tsx')

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
-- 
cgit v1.2.3