## 1. Install and configure next-themes - [x] 1.1 Install `next-themes` package - [x] 1.2 Create `src/components/ThemeProvider.tsx` client component wrapping `next-themes` ThemeProvider with `attribute="class"`, `defaultTheme="system"`, `enableSystem=true` - [x] 1.3 Update `src/app/layout.tsx` to wrap children with ThemeProvider and add `suppressHydrationWarning` to `` ## 2. Define dark/light CSS variables - [x] 2.1 Update `src/app/globals.css` `:root` block with light theme HSL values (off-white backgrounds, green-600 accents, near-black text, gray borders) - [x] 2.2 Add `.dark` block in `src/app/globals.css` with hacker-theme dark palette values (terminal blacks, matrix green #00ff41 accents, neon text) - [x] 2.3 Update scrollbar styles in `globals.css` to use theme-aware colors for both light and dark modes - [x] 2.4 Conditionally apply CRT scanline/glow CSS effects only inside `.dark` selector ## 3. Update Tailwind config - [x] 3.1 Verify `tailwind.config.ts` has `darkMode: ["class"]` (already set) - [x] 3.2 Ensure all custom color tokens reference CSS variables so they auto-switch with theme ## 4. Add theme toggle to sidebar - [x] 4.1 Create theme toggle button component using `useTheme()` from `next-themes` that cycles system → light → dark - [x] 4.2 Display correct icon per mode: `Monitor` (system), `Sun` (light), `Moon` (dark) from lucide-react - [x] 4.3 Add tooltip showing current mode name on hover - [x] 4.4 Place the toggle button at the bottom of `src/components/Toolbox.tsx`, visually separated from tool buttons ## 5. Update chart theming - [x] 5.1 Update `src/components/CandleChart.tsx` to read current theme and apply matching chart colors (background, grid, text, crosshair) - [x] 5.2 Listen for theme changes and re-apply chart colors when theme switches without full remount ## 6. Audit and fix hardcoded colors - [x] 6.1 Audit `src/components/Toolbox.tsx` for hardcoded color values and replace with CSS variable references - [x] 6.2 Audit `src/components/SvgOverlay.tsx` for hardcoded colors and update for theme compatibility - [x] 6.3 Audit `src/app/page.tsx` and `src/app/annotation-types/page.tsx` for hardcoded colors - [x] 6.4 Verify shadcn-ui components (`button.tsx`, `input.tsx`, `tooltip.tsx`) use theme variables correctly ## 7. Test and verify - [x] 7.1 Verify no FOUC — page loads in correct theme without flash - [x] 7.2 Test toggle cycles correctly through system → light → dark → system - [x] 7.3 Verify localStorage persistence survives page refresh - [x] 7.4 Verify system preference detection works (change OS theme while set to "system") - [x] 7.5 Verify chart colors update when theme switches - [x] 7.6 Verify all components render correctly in both themes