Skip to content

feat(web): add light mode theme support #242

@zhangweijian97

Description

@zhangweijian97

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

  1. 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)
  2. Theme switching mechanism:

    • Add a theme toggle in the UI
    • Persist user preference (localStorage)
    • Consider using next-themes for Next.js integration
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions