Goal
Add a dark/light theme toggle in the top bar so users can switch between the warm-ivory default and a dark variant.
Why
Roadmap "Dark theme" item. Long review sessions on a bright canvas can be tiring; many AI IDE users work in dark themes already.
Scope (what is in)
Out of scope
- Theming the React Flow control panel (use defaults)
- Dark variant for screenshots in README
Files likely involved
viewer/src/app/TopBar.tsxviewer/src/index.cssviewer/src/App.tsx (toggle state at top level)
Acceptance criteria
Estimated effort
~3-4 hours / ~3 files
Hints
The existing palette uses oklch() lightness values; mirror them around 0.5 for dark mode. Look at how accent and accent-soft are layered.
Want to take this?
Comment "I'd like to take this" and I'll confirm within 24h.
Goal
Add a dark/light theme toggle in the top bar so users can switch between the warm-ivory default and a dark variant.
Why
Roadmap "Dark theme" item. Long review sessions on a bright canvas can be tiring; many AI IDE users work in dark themes already.
Scope (what is in)
TopBar.tsx(sun/moon icon from lucide-react)index.css(under.darkclass on<html>)codesee.theme)prefers-color-scheme)Out of scope
Files likely involved
viewer/src/app/TopBar.tsxviewer/src/index.cssviewer/src/App.tsx(toggle state at top level)Acceptance criteria
npm run buildEstimated effort
~3-4 hours / ~3 files
Hints
The existing palette uses
oklch()lightness values; mirror them around 0.5 for dark mode. Look at howaccentandaccent-softare layered.Want to take this?
Comment "I'd like to take this" and I'll confirm within 24h.