Conversation behind 71444a2ae7d1: Add dark mode toggle

User

Add a dark mode toggle in the header. It should follow the system setting until someone picks, then remember their choice.

Assistant (thinking)

Three states, not two: system, light, dark. Store only an explicit pick in localStorage; with no pick, follow prefers-color-scheme. Set data-theme on <html> so CSS variables switch.

Tool call: Edit

{
 "file_path": "/home/dev/code/web-app/src/theme.ts",
 "old_string": "export const theme = {\n  bg: \"#ffffff\",\n  text: \"#111111\",\n};\n",
 "new_string": "export const themes = {\n  light: { bg: \"#ffffff\", text: \"#111111\" },\n  dark: { bg: \"#0d1117\", text: \"#e6edf3\" },\n};\n\nexport type ThemeName = keyof typeof themes;\n"
}

Tool result

The file src/theme.ts has been updated.

Tool call: Write

{
 "file_path": "/home/dev/code/web-app/src/components/ThemeToggle.tsx",
 "content": "export function ThemeToggle() {\n  const [pick, setPick] = useState<ThemeName | null>(() => localStorage.getItem(\"theme\") as ThemeName | null);\n\n  useEffect(() => {\n    if (pick) document.documentElement.dataset.theme = pick;\n    else delete document.documentElement.dataset.theme; // follow the system\n  }, [pick]);\n\n  function toggle() {\n    const dark = pick ? pick === \"dark\" : matchMedia(\"(prefers-color-scheme: dark)\").matches;\n    const next = dark ? \"light\" : \"dark\";\n    localStorage.setItem(\"theme\", next);\n    setPick(next);\n  }\n\n  return <button onClick={toggle} aria-label=\"Toggle dark mode\">◐</button>;\n}\n"
}

Tool result

File created successfully at: src/components/ThemeToggle.tsx

Assistant

Added ThemeToggle. With no saved choice it follows the system setting; clicking saves an explicit light or dark choice in localStorage and sets data-theme on the root element.

Tool call: Bash

{
 "command": "git commit -am \"Add dark mode toggle\"",
 "description": "Commit"
}