feat: support light mode

Author: zsq1234

src/App.test.tsx

@@ -45,12 +45,36 @@ const homesResponse = {
 
 describe("App Codex home flow", () => {
   beforeEach(() => {
+    localStorage.clear();
+    delete document.documentElement.dataset.theme;
+    document.documentElement.style.colorScheme = "";
     invokeMock.mockReset().mockResolvedValue(homesResponse);
     resetSessionMock.mockReset().mockResolvedValue(undefined);
     resetPickerMock.mockReset().mockResolvedValue(undefined);
     discoverSessionsMock.mockReset().mockResolvedValue(undefined);
   });
 
+  it("defaults to dark mode and persists theme changes", async () => {
+    render(<App />);
+
+    expect(document.documentElement).toHaveAttribute("data-theme", "dark");
+    fireEvent.click(screen.getByRole("button", { name: "Switch to light mode" }));
+
+    expect(document.documentElement).toHaveAttribute("data-theme", "light");
+    expect(document.documentElement.style.colorScheme).toBe("light");
+    expect(localStorage.getItem("codex-trace-theme")).toBe("light");
+    expect(screen.getByRole("button", { name: "Switch to dark mode" })).toBeInTheDocument();
+  });
+
+  it("restores a persisted light theme", () => {
+    localStorage.setItem("codex-trace-theme", "light");
+
+    render(<App />);
+
+    expect(document.documentElement).toHaveAttribute("data-theme", "light");
+    expect(screen.getByRole("button", { name: "Switch to dark mode" })).toBeInTheDocument();
+  });
+
   it("auto-selects the existing single-home deployment", async () => {
     invokeMock.mockResolvedValue({
       homes: [{ id: "default", name: "Default", sessions_dir: "/default/sessions" }],

src/App.tsx

@@ -4,6 +4,7 @@ import { useSession } from "./hooks/useSession";
 import { usePicker } from "./hooks/usePicker";
 import { useCodexHomes } from "./hooks/useCodexHomes";
 import { useToggleSet } from "./hooks/useToggleSet";
+import { ThemeContext, useTheme } from "./hooks/useTheme";
 import { useKeyboard } from "./hooks/useKeyboard";
 import { SidebarTree } from "./components/SidebarTree";
 import { SessionPicker } from "./components/SessionPicker";
@@ -30,6 +31,7 @@ function findToolByCallId(tools: CodexToolCall[], callId: string): CodexToolCall
 }
 
 export function App() {
+  const { theme, toggleTheme } = useTheme();
   const [view, setView] = useState<ViewState>("homes");
   const [selectedTurn, setSelectedTurn] = useState(0);
   const [pickerSelected, setPickerSelected] = useState(0);
@@ -222,128 +224,132 @@ export function App() {
   });
 
   return (
-    <div className="app">
-      {/* Info bar — only when session loaded and not in picker */}
-      {session.sessionPath && view !== "picker" && session.session && (
-        <InfoBar session={session.session} />
-      )}
-
-      {/* View toolbar */}
-      <ViewToolbar
-        view={view}
-        hasSession={!!session.sessionPath}
-        activeHomeName={codexHomes.activeHome?.name ?? null}
-        canSwitchHomes={codexHomes.homes.length > 1}
-        canOpenSettings={view !== "homes" && !codexHomes.multiHomeEnabled}
-        onGoToSessions={goToSessions}
-        onSwitchHomes={() => void handleSwitchHomes()}
-        onExpandAll={expandAll}
-        onCollapseAll={collapseAll}
-        onOpenSettings={() => setShowSettings(true)}
-      />
-
-      <div className="app-body">
-        {/* Left sidebar */}
-        {view !== "homes" && (
-          <>
-            <div className="app__sidebar" style={{ width: sidebarWidth, minWidth: sidebarWidth }}>
-              <div className="app__sidebar-header">
-                <span className="app__sidebar-title">SESSIONS</span>
-              </div>
-              <SidebarTree
-                sessions={picker.allSessions}
-                selectedPath={session.sessionPath || null}
-                collapsedDates={collapsedDates}
-                onSelectSession={handleSelectSession}
-                onToggleDate={handleToggleDate}
-              />
-            </div>
-
-            <ResizeHandle onResize={setSidebarWidth} />
-          </>
+    <ThemeContext.Provider value={theme}>
+      <div className="app">
+        {/* Info bar — only when session loaded and not in picker */}
+        {session.sessionPath && view !== "picker" && session.session && (
+          <InfoBar session={session.session} />
         )}
 
-        {/* Main content */}
-        <div className="main-content">
-          {view === "homes" && (
-            <CodexHomeSelector
-              homes={codexHomes.homes}
-              loading={codexHomes.loading}
-              error={codexHomes.error}
-              selectedIndex={codexHomes.selectedIndex}
-              onSelect={(home) => void handleSelectHome(home)}
-              onRetry={() => void discoverHomes(true)}
-            />
-          )}
-
-          {view === "picker" && (
-            <SessionPicker
-              sessions={picker.sessions}
-              loading={picker.loading}
-              searchQuery={picker.searchQuery}
-              selectedIndex={pickerSelected}
-              onSelectSession={handleSelectSession}
-              onSearchChange={picker.setSearchQuery}
-            />
-          )}
+        {/* View toolbar */}
+        <ViewToolbar
+          view={view}
+          hasSession={!!session.sessionPath}
+          activeHomeName={codexHomes.activeHome?.name ?? null}
+          canSwitchHomes={codexHomes.homes.length > 1}
+          canOpenSettings={view !== "homes" && !codexHomes.multiHomeEnabled}
+          onGoToSessions={goToSessions}
+          onSwitchHomes={() => void handleSwitchHomes()}
+          onExpandAll={expandAll}
+          onCollapseAll={collapseAll}
+          onOpenSettings={() => setShowSettings(true)}
+          theme={theme}
+          onToggleTheme={toggleTheme}
+        />
 
-          {view === "list" && session.loading && (
-            <div className="app__loading">Loading session…</div>
-          )}
+        <div className="app-body">
+          {/* Left sidebar */}
+          {view !== "homes" && (
+            <>
+              <div className="app__sidebar" style={{ width: sidebarWidth, minWidth: sidebarWidth }}>
+                <div className="app__sidebar-header">
+                  <span className="app__sidebar-title">SESSIONS</span>
+                </div>
+                <SidebarTree
+                  sessions={picker.allSessions}
+                  selectedPath={session.sessionPath || null}
+                  collapsedDates={collapsedDates}
+                  onSelectSession={handleSelectSession}
+                  onToggleDate={handleToggleDate}
+                />
+              </div>
 
-          {view === "list" && !session.loading && session.session && (
-            <TurnList
-              turns={turns}
-              selectedIndex={selectedTurn}
-              onSelectTurn={(i) => {
-                setSelectedTurn(i);
-                setView("detail");
-              }}
-            />
+              <ResizeHandle onResize={setSidebarWidth} />
+            </>
           )}
 
-          {view === "detail" && turns[selectedTurn] && (
-            <TurnDetail
-              turn={turns[selectedTurn]}
-              expanded={expandedTools}
-              onToggle={toggleTool}
-              onBack={() => setView("list")}
-              openWorkerCallId={workerPanelCallId}
-              onOpenWorkerPanel={handleOpenWorkerPanel}
-            />
+          {/* Main content */}
+          <div className="main-content">
+            {view === "homes" && (
+              <CodexHomeSelector
+                homes={codexHomes.homes}
+                loading={codexHomes.loading}
+                error={codexHomes.error}
+                selectedIndex={codexHomes.selectedIndex}
+                onSelect={(home) => void handleSelectHome(home)}
+                onRetry={() => void discoverHomes(true)}
+              />
+            )}
+
+            {view === "picker" && (
+              <SessionPicker
+                sessions={picker.sessions}
+                loading={picker.loading}
+                searchQuery={picker.searchQuery}
+                selectedIndex={pickerSelected}
+                onSelectSession={handleSelectSession}
+                onSearchChange={picker.setSearchQuery}
+              />
+            )}
+
+            {view === "list" && session.loading && (
+              <div className="app__loading">Loading session…</div>
+            )}
+
+            {view === "list" && !session.loading && session.session && (
+              <TurnList
+                turns={turns}
+                selectedIndex={selectedTurn}
+                onSelectTurn={(i) => {
+                  setSelectedTurn(i);
+                  setView("detail");
+                }}
+              />
+            )}
+
+            {view === "detail" && turns[selectedTurn] && (
+              <TurnDetail
+                turn={turns[selectedTurn]}
+                expanded={expandedTools}
+                onToggle={toggleTool}
+                onBack={() => setView("list")}
+                openWorkerCallId={workerPanelCallId}
+                onOpenWorkerPanel={handleOpenWorkerPanel}
+              />
+            )}
+          </div>
+
+          {view === "detail" && workerPanelTool?.worker_session && (
+            <>
+              <ResizeHandle onResize={setWorkerPanelWidth} side="right" />
+              <WorkerPanel
+                session={workerPanelTool.worker_session}
+                sourceTool={workerPanelTool}
+                activeWorkerCallId={workerPanelCallId}
+                style={{ flex: `0 0 ${workerPanelWidth}px`, maxWidth: workerPanelWidth }}
+                onClose={closeWorkerPanel}
+                onOpenWorker={handleOpenWorkerPanel}
+              />
+            </>
           )}
         </div>
 
-        {view === "detail" && workerPanelTool?.worker_session && (
-          <>
-            <ResizeHandle onResize={setWorkerPanelWidth} side="right" />
-            <WorkerPanel
-              session={workerPanelTool.worker_session}
-              sourceTool={workerPanelTool}
-              activeWorkerCallId={workerPanelCallId}
-              style={{ flex: `0 0 ${workerPanelWidth}px`, maxWidth: workerPanelWidth }}
-              onClose={closeWorkerPanel}
-              onOpenWorker={handleOpenWorkerPanel}
-            />
-          </>
+        {/* Bottom keybind bar */}
+        <KeybindBar
+          view={view}
+          showHints={showKeybinds}
+          onToggle={() => setShowKeybinds((p) => !p)}
+        />
+
+        {showSettings && !codexHomes.multiHomeEnabled && (
+          <SettingsModal
+            onClose={() => setShowSettings(false)}
+            onSaved={(dir) => {
+              discoverSessions(dir);
+            }}
+          />
         )}
       </div>
-
-      {/* Bottom keybind bar */}
-      <KeybindBar
-        view={view}
-        showHints={showKeybinds}
-        onToggle={() => setShowKeybinds((p) => !p)}
-      />
-
-      {showSettings && !codexHomes.multiHomeEnabled && (
-        <SettingsModal
-          onClose={() => setShowSettings(false)}
-          onSaved={(dir) => {
-            discoverSessions(dir);
-          }}
-        />
-      )}
-    </div>
+    </ThemeContext.Provider>
   );
 }

src/components/MarkdownRenderer.tsx

@@ -1,8 +1,9 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { oneDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { formatJson } from "../lib/format";
+import { useCurrentTheme } from "../hooks/useTheme";
 
 function isPureJson(s: string): boolean {
   const t = s.trimStart();
@@ -16,9 +17,12 @@ function isPureJson(s: string): boolean {
 }
 
 export function MarkdownRenderer({ content }: { content: string }) {
+  const theme = useCurrentTheme();
+  const syntaxTheme = theme === "light" ? oneLight : oneDark;
+
   if (isPureJson(content)) {
     return (
-      <SyntaxHighlighter language="json" style={oneDark} PreTag="div">
+      <SyntaxHighlighter language="json" style={syntaxTheme} PreTag="div">
         {formatJson(content)}
       </SyntaxHighlighter>
     );
@@ -34,7 +38,7 @@ export function MarkdownRenderer({ content }: { content: string }) {
           const code = String(children).replace(/\n$/, "");
           if (lang) {
             return (
-              <SyntaxHighlighter language={lang} style={oneDark} PreTag="div">
+              <SyntaxHighlighter language={lang} style={syntaxTheme} PreTag="div">
                 {code}
               </SyntaxHighlighter>
             );

src/components/ViewToolbar.tsx

@@ -1,5 +1,7 @@
 import type { ViewState } from "../../shared/types";
 import { IoMdSettings } from "react-icons/io";
+import { MdDarkMode, MdLightMode } from "react-icons/md";
+import type { Theme } from "../hooks/useTheme";
 
 interface ViewToolbarProps {
   view: ViewState;
@@ -12,6 +14,8 @@ interface ViewToolbarProps {
   onExpandAll: () => void;
   onCollapseAll: () => void;
   onOpenSettings: () => void;
+  theme: Theme;
+  onToggleTheme: () => void;
 }
 
 function scrollContent(to: "top" | "bottom") {
@@ -30,6 +34,8 @@ export function ViewToolbar({
   onExpandAll,
   onCollapseAll,
   onOpenSettings,
+  theme,
+  onToggleTheme,
 }: ViewToolbarProps) {
   return (
     <div className="view-toolbar">
@@ -62,6 +68,15 @@ export function ViewToolbar({
         </>
       )}
       <span className="view-toolbar__spacer" />
+      <button
+        className="view-toolbar__btn view-toolbar__theme-toggle"
+        onClick={onToggleTheme}
+        aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+        title={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
+      >
+        {theme === "dark" ? <MdLightMode /> : <MdDarkMode />}
+        <span>{theme === "dark" ? "Light" : "Dark"}</span>
+      </button>
       {canOpenSettings && (
         <button className="view-toolbar__btn" onClick={onOpenSettings} title="Settings (,) ">
           <IoMdSettings />