1.6 KiB
1.6 KiB
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-variantso alldark:utilities are controlled by adarkclass on<html>. - Add a
ThemeTogglecomponent that persists the user's preference inlocalStorageand 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 undersrc/components/, and page header text insrc/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.