trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions
candle-annotator/openspec/changes/add-dark-light-mode/tasks.md
Marko Djordjevic 0d235602af feat: implement dark/light mode with system detection 
- Install and configure next-themes for theme management
- Add ThemeProvider wrapper component with suppressHydrationWarning
- Define light theme CSS variables (off-white backgrounds, green accents)
- Define dark theme CSS variables (hacker theme: terminal blacks, matrix green)
- Update scrollbar styles for both themes
- Add CRT scanline/glow effects (dark mode only)
- Create ThemeToggle component with system/light/dark cycling
- Add theme toggle to Toolbox sidebar
- Update CandleChart to apply theme-specific colors
- Chart colors update dynamically on theme change
- All components use CSS variables for theme compatibility
- FOUC prevention via next-themes inline script
2026-02-12 23:31:51 +01:00

2.7 KiB
Raw Blame History

1. Install and configure next-themes

  • 1.1 Install next-themes package
  • 1.2 Create src/components/ThemeProvider.tsx client component wrapping next-themes ThemeProvider with attribute="class", defaultTheme="system", enableSystem=true
  • 1.3 Update src/app/layout.tsx to wrap children with ThemeProvider and add suppressHydrationWarning to <html>

2. Define dark/light CSS variables

  • 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)
  • 2.2 Add .dark block in src/app/globals.css with hacker-theme dark palette values (terminal blacks, matrix green #00ff41 accents, neon text)
  • 2.3 Update scrollbar styles in globals.css to use theme-aware colors for both light and dark modes
  • 2.4 Conditionally apply CRT scanline/glow CSS effects only inside .dark selector

3. Update Tailwind config

  • 3.1 Verify tailwind.config.ts has darkMode: ["class"] (already set)
  • 3.2 Ensure all custom color tokens reference CSS variables so they auto-switch with theme

4. Add theme toggle to sidebar

  • 4.1 Create theme toggle button component using useTheme() from next-themes that cycles system → light → dark
  • 4.2 Display correct icon per mode: Monitor (system), Sun (light), Moon (dark) from lucide-react
  • 4.3 Add tooltip showing current mode name on hover
  • 4.4 Place the toggle button at the bottom of src/components/Toolbox.tsx, visually separated from tool buttons

5. Update chart theming

  • 5.1 Update src/components/CandleChart.tsx to read current theme and apply matching chart colors (background, grid, text, crosshair)
  • 5.2 Listen for theme changes and re-apply chart colors when theme switches without full remount

6. Audit and fix hardcoded colors

  • 6.1 Audit src/components/Toolbox.tsx for hardcoded color values and replace with CSS variable references
  • 6.2 Audit src/components/SvgOverlay.tsx for hardcoded colors and update for theme compatibility
  • 6.3 Audit src/app/page.tsx and src/app/annotation-types/page.tsx for hardcoded colors
  • 6.4 Verify shadcn-ui components (button.tsx, input.tsx, tooltip.tsx) use theme variables correctly

7. Test and verify

  • 7.1 Verify no FOUC — page loads in correct theme without flash
  • 7.2 Test toggle cycles correctly through system → light → dark → system
  • 7.3 Verify localStorage persistence survives page refresh
  • 7.4 Verify system preference detection works (change OS theme while set to "system")
  • 7.5 Verify chart colors update when theme switches
  • 7.6 Verify all components render correctly in both themes