Description:
Currently the app uses a dark theme exclusively (slate-950 background). We want to add a toggle button (e.g., sun/moon icon) in the header that allows users to switch between dark and light modes. The chosen preference should be saved in localStorage and applied on subsequent visits.
Acceptance Criteria:
- Add a button to the header (next to "Sign Out") that toggles between dark and light.
- Use next-themes (or implement simple CSS class switching). Prefer using a provider that adds a class to the element.
- Dark mode uses current colors; light mode should use lighter backgrounds (e.g., bg-white, text-slate-900).
- Ensure all custom components (cards, buttons, inputs) adapt to the theme.
- Persist the choice in localStorage.
- Prevent flash of wrong theme on page load.
Files to change: frontend/app/layout.tsx, frontend/app/globals.css, frontend/components/layout/Header.tsx, plus a new theme provider component.
Note: You can use Tailwind CSS dark mode feature (add dark: variant). This is a great exercise to learn Tailwind theming.
Description:
Currently the app uses a dark theme exclusively (slate-950 background). We want to add a toggle button (e.g., sun/moon icon) in the header that allows users to switch between dark and light modes. The chosen preference should be saved in localStorage and applied on subsequent visits.
Acceptance Criteria:
Files to change: frontend/app/layout.tsx, frontend/app/globals.css, frontend/components/layout/Header.tsx, plus a new theme provider component.
Note: You can use Tailwind CSS dark mode feature (add dark: variant). This is a great exercise to learn Tailwind theming.