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/App.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to 'renderer/src/App.tsx')

diff --git a/renderer/src/App.tsx b/renderer/src/App.tsx
index 26ac252..5ca7a9b 100644
--- a/renderer/src/App.tsx
+++ b/renderer/src/App.tsx
@@ -8,6 +8,8 @@ import "./styles/globals.css";
 
 const api = window.api;
 
+type Theme = "dark" | "light";
+
 export function App() {
   const [projects, setProjects] = useState<Project[]>([]);
   const [sessions, setSessions] = useState<Session[]>([]);
@@ -23,6 +25,19 @@ export function App() {
   });
   const [error, setError] = useState<string | null>(null);
 
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem("cf-theme") as Theme) ?? "dark"
+  );
+
+  // Keep document.documentElement in sync and persist to localStorage
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("cf-theme", theme);
+  }, [theme]);
+
+  const handleToggleTheme = () =>
+    setTheme((t) => (t === "dark" ? "light" : "dark"));
+
   const hasChanges = documentContent !== originalContent;
 
   // Clear error after 5 seconds
@@ -282,6 +297,8 @@ export function App() {
         onCreateSession={handleCreateSession}
         onDeleteProject={handleDeleteProject}
         onDeleteSession={handleDeleteSession}
+        theme={theme}
+        onToggleTheme={handleToggleTheme}
       />
 
       <div className="main-content">
@@ -291,6 +308,7 @@ export function App() {
           phase={selectedSession?.phase || "research"}
           disabled={!selectedSession || selectedSession.phase === "implement"}
           showOnboarding={!selectedProject}
+          theme={theme}
         />
 
         <ChatPane
-- 
cgit v1.2.3