Add dark mode toggle
Trail-Session: claude:8a116eac-745a-4bac-9435-0f21a8b6ca59
Trail-Link: http://localhost:8787/repos/web-app/session/8a116eac-745a-4bac-9435-0f21a8b6ca59
Ssam committed 4 days ago · maincommit 71444a2ae7d1a5b4bbafd60fd23df72f7c9722e2
Agent sessions behind this commit1
Add a dark mode toggle in the header. It should follow the system setting until someone picks, then remember their choice.
Conversationclaude:8a116eac-745a-4bac-9435-0f21a8b6ca59 · transcript lines 0–8
Showing 2 changed files with 22 additions and 3 deletions.
src/components/ThemeToggle.tsx+17 −0
@@ -0,0 +1,17 @@
+export function ThemeToggle() {
+ const [pick, setPick] = useState<ThemeName | null>(() => localStorage.getItem("theme") as ThemeName | null);
+
+ useEffect(() => {
+ if (pick) document.documentElement.dataset.theme = pick;
+ else delete document.documentElement.dataset.theme; // follow the system
+ }, [pick]);
+
+ function toggle() {
+ const dark = pick ? pick === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
+ const next = dark ? "light" : "dark";
+ localStorage.setItem("theme", next);
+ setPick(next);
+ }
+
+ return <button onClick={toggle} aria-label="Toggle dark mode">◐</button>;
+}
src/theme.ts+5 −3
@@ -1,4 +1,6 @@
-export const theme = {
- bg: "#ffffff",
- text: "#111111",
+export const themes = {
+ light: { bg: "#ffffff", text: "#111111" },
+ dark: { bg: "#0d1117", text: "#e6edf3" },
};
+
+export type ThemeName = keyof typeof themes;