vj/monthlytracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
feb2f2c37eb7bcc4a0adc33b72814a72c4a80e5e
monthlytracker/openspec/changes/archive/2026-03-23-theming-dark-mode/tasks.md

1.6 KiB
Raw Blame History

1. CSS and variant setup

  • 1.1 Add @custom-variant dark (&:where(.dark, .dark *)) to globals.css and update :root / @theme blocks with dark-mode CSS variable overrides.

2. Theme toggle infrastructure

  • 2.1 Create src/components/theme-toggle.tsx — a client component that reads and writes localStorage theme preference, toggles the dark class on <html>, and renders a sun/moon button.
  • 2.2 Update src/app/layout.tsx to inject the inline blocking script in <head> and render ThemeToggle in the header alongside SiteNav.

3. Component dark-mode styles

  • 3.1 Update src/components/site-nav.tsx with dark: variants for link backgrounds, borders, and text.
  • 3.2 Update src/components/home-dashboard.tsx with dark: variants for all section cards, stat tiles, insight blocks, progress bars, and empty states.
  • 3.3 Update src/components/expense-workspace.tsx with dark: variants for the form card, list card, inputs, and expense articles.
  • 3.4 Update src/components/paycheck-workspace.tsx with dark: variants for the schedule panel, form, and paycheck list.
  • 3.5 Update src/components/recurring-expense-manager.tsx with dark: 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.tsx and src/app/income/page.tsx with dark: 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.
Reference in New Issue View Git Blame Copy Permalink