## 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 `<html>`

## 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
