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

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

diff --git a/renderer/src/components/Header.tsx b/renderer/src/components/Header.tsx
index b6bed26..b4faa6e 100644
--- a/renderer/src/components/Header.tsx
+++ b/renderer/src/components/Header.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import type { Project, Session, Phase } from "../types";
 
+type Theme = "dark" | "light";
+
 interface HeaderProps {
   projects: Project[];
   sessions: Session[];
@@ -12,6 +14,8 @@ interface HeaderProps {
   onCreateSession: () => void;
   onDeleteProject?: (id: string) => void;
   onDeleteSession?: (id: string) => void;
+  theme: Theme;
+  onToggleTheme: () => void;
 }
 
 const phaseLabels: Record<Phase, string> = {
@@ -33,6 +37,8 @@ export function Header({
   onCreateSession,
   onDeleteProject,
   onDeleteSession,
+  theme,
+  onToggleTheme,
 }: HeaderProps) {
   const handleDeleteProject = () => {
     if (!selectedProject || !onDeleteProject) return;
@@ -51,6 +57,9 @@ export function Header({
   return (
     <header className="header">
       <div className="header-left">
+        {/* ── Wordmark ── */}
+        <span className="app-wordmark">Claude Flow</span>
+
         <select
           value={selectedProject?.id || ""}
           onChange={(e) => {
@@ -129,6 +138,11 @@ export function Header({
             })}
           </div>
         )}
+
+        {/* ── Theme toggle ── */}
+        <button className="theme-toggle" onClick={onToggleTheme}>
+          {theme === "dark" ? "[light]" : "[dark]"}
+        </button>
       </div>
     </header>
   );
-- 
cgit v1.2.3