1 files changed, 18 insertions, 0 deletions

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