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
This commit is contained in:
Marko Djordjevic
parent
4dad24845e
commit
0d235602af
9 changed files with 310 additions and 59 deletions
|
|
@ -1,45 +1,45 @@
|
|||
## 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>`
|
||||
- [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
|
||||
|
||||
- [ ] 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
|
||||
- [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
|
||||
|
||||
- [ ] 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
|
||||
- [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
|
||||
|
||||
- [ ] 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
|
||||
- [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
|
||||
|
||||
- [ ] 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
|
||||
- [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
|
||||
|
||||
- [ ] 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
|
||||
- [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
|
||||
|
||||
- [ ] 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
|
||||
- [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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue