Vijayakanth Manoharan
012385e9e1
- Add @custom-variant dark in globals.css for class-based dark mode - Add ThemeToggle component with localStorage persistence and system preference fallback - Inject blocking inline script in layout to prevent flash on load - Apply dark: variants across all components (layout, site-nav, home-dashboard, expense-workspace, paycheck-workspace, recurring-expense-manager) and page headers - Create openspec/changes/theming-dark-mode with proposal, design, and tasks artifacts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1.6 KiB
1.6 KiB
1. CSS and variant setup
- 1.1 Add
@custom-variant dark (&:where(.dark, .dark *))toglobals.cssand update:root/@themeblocks with dark-mode CSS variable overrides.
2. Theme toggle infrastructure
- 2.1 Create
src/components/theme-toggle.tsx— a client component that reads and writeslocalStoragetheme preference, toggles thedarkclass on<html>, and renders a sun/moon button. - 2.2 Update
src/app/layout.tsxto inject the inline blocking script in<head>and renderThemeTogglein the header alongsideSiteNav.
3. Component dark-mode styles
- 3.1 Update
src/components/site-nav.tsxwithdark:variants for link backgrounds, borders, and text. - 3.2 Update
src/components/home-dashboard.tsxwithdark:variants for all section cards, stat tiles, insight blocks, progress bars, and empty states. - 3.3 Update
src/components/expense-workspace.tsxwithdark:variants for the form card, list card, inputs, and expense articles. - 3.4 Update
src/components/paycheck-workspace.tsxwithdark:variants for the schedule panel, form, and paycheck list. - 3.5 Update
src/components/recurring-expense-manager.tsxwithdark:variants for the panel, inline form, and definition articles.
4. Page header text
- 4.1 Update hardcoded text colours in
src/app/add-expense/page.tsxandsrc/app/income/page.tsxwithdark:overrides.
5. Verification
- 5.1 Visually verify light and dark modes across the dashboard, add-expense, and income pages in the browser.
- 5.2 Verify that theme preference persists across page refreshes and that there is no flash of the wrong theme on load.