Skip to content

[Good First Issue] Add dark mode support to the web dashboard #8

@pixelstrade-dev

Description

@pixelstrade-dev

Description

The CAIMS dashboard only supports light mode. Adding dark mode would improve UX during long evaluation sessions.

What to do

  1. Add a theme toggle button in the navigation bar
    1. Create CSS variables for light/dark themes
    1. Implement theme persistence via localStorage
    1. Update all components to use theme variables
    1. Add system preference detection (prefers-color-scheme)

Skills needed

  • React / Next.js
    • CSS / Tailwind CSS
      • Basic TypeScript

References

  • Main layout: apps/web/app/layout.tsx
    • Dashboard: apps/web/app/page.tsx

Metadata

Metadata

Labels

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions