Summary
Add light mode (day theme) support to the Web UI, with design reference from Linear's Light Mode.
Current State
The Web UI currently uses a hardcoded dark theme. The CSS variable system is already in place (HSL format in globals.css), but there is no theme switching mechanism (no next-themes or similar).
Requirements
-
Light mode color palette inspired by Linear's Light Mode:
- Warm gray tones, avoiding pure white + pure black contrast
- Clean, professional look
- Default to light mode (user's preference due to astigmatism)
-
Theme switching mechanism:
- Add a theme toggle in the UI
- Persist user preference (localStorage)
- Consider using
next-themes for Next.js integration
-
Areas to update:
- CSS variables in
globals.css (already HSL, good foundation)
- Replace hardcoded
text-zinc-*, bg-zinc-* classes (~10-20 occurrences)
- Ensure all components respect the theme
Design Reference
- Linear Light Mode: warm gray tones, subtle borders, clean typography
- Avoid harsh pure white backgrounds — use warm off-white tones
- Ensure sufficient contrast for readability
Technical Notes
- The CSS variable system is well-structured with HSL values — this is a good foundation for dual-theme support
- Estimated effort: 2-3 hours
- No backend changes needed
Summary
Add light mode (day theme) support to the Web UI, with design reference from Linear's Light Mode.
Current State
The Web UI currently uses a hardcoded dark theme. The CSS variable system is already in place (HSL format in
globals.css), but there is no theme switching mechanism (nonext-themesor similar).Requirements
Light mode color palette inspired by Linear's Light Mode:
Theme switching mechanism:
next-themesfor Next.js integrationAreas to update:
globals.css(already HSL, good foundation)text-zinc-*,bg-zinc-*classes (~10-20 occurrences)Design Reference
Technical Notes