Fix dashboard hydration and archive theming

2026-03-23 23:08:18 -04:00
parent c852ad0d80
commit feb2f2c37e
25 changed files with 290 additions and 13 deletions
--- a/openspec/changes/archive/2026-03-23-theming-dark-mode/proposal.md
+++ b/openspec/changes/archive/2026-03-23-theming-dark-mode/proposal.md
@@ -0,0 +1,27 @@
+## Why
+
+The app currently ships with a warm light theme only. Adding a system-aware dark mode with a manual toggle removes eye strain in low-light conditions and meets baseline accessibility expectations for a personal finance tool used at any hour.
+
+## What Changes
+
+- Add a class-based dark mode variant using Tailwind v4 `@custom-variant` so all `dark:` utilities are controlled by a `dark` class on `<html>`.
+- Add a `ThemeToggle` component that persists the user's preference in `localStorage` and initialises the correct class before first paint to prevent flash.
+- Update the root layout to inject the inline initialisation script and render the toggle inside the existing header.
+- Apply `dark:` variants to all UI components to produce a warm, deep-stone dark palette consistent with the existing amber/stone design language.
+
+## Capabilities
+
+### New Capabilities
+- `dark-mode`: Users can switch between light and dark themes with a toggle that persists across sessions. System preference is respected on first visit.
+
+### Modified Capabilities
+- `expense-tracking`: Expense workspace and recurring expense manager now render correctly in both themes.
+- `paycheck-tracking`: Paycheck workspace now renders correctly in both themes.
+- `monthly-dashboard`: Dashboard sections, insight cards, category bars, and stat cards now render correctly in both themes.
+
+## Impact
+
+- Affected code: `globals.css`, `layout.tsx`, all components under `src/components/`, and page header text in `src/app/`.
+- APIs: None.
+- Dependencies: None — uses Tailwind v4 built-ins and the Web Storage API.
+- Systems: No server-side changes required; theme state is fully client-side.