45 lines
2.7 KiB
Markdown
45 lines
2.7 KiB
Markdown
## 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
|