Fix dashboard hydration and archive theming
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: User can switch between light and dark themes
|
||||
The system SHALL allow the user to toggle between light and dark themes with a persistent preference.
|
||||
|
||||
#### Scenario: User toggles dark mode on
|
||||
- **WHEN** the user activates the theme toggle while the app is in light mode
|
||||
- **THEN** the system applies the dark theme and saves the preference for future visits
|
||||
|
||||
#### Scenario: User toggles dark mode off
|
||||
- **WHEN** the user activates the theme toggle while the app is in dark mode
|
||||
- **THEN** the system applies the light theme and saves the preference for future visits
|
||||
|
||||
### Requirement: Theme preference respects system defaults on first visit
|
||||
The system SHALL use the user's system color scheme preference when no saved preference exists.
|
||||
|
||||
#### Scenario: No stored preference uses system theme
|
||||
- **WHEN** the user opens the app for the first time without a saved theme preference
|
||||
- **THEN** the system applies dark mode when the operating system prefers dark color schemes and light mode otherwise
|
||||
|
||||
### Requirement: Theme selection loads without a flash of the wrong theme
|
||||
The system SHALL initialize the theme before the first visible paint so the page does not briefly render in the wrong theme.
|
||||
|
||||
#### Scenario: Initial paint matches saved theme
|
||||
- **WHEN** the app loads and a saved theme preference exists
|
||||
- **THEN** the document theme is applied before the page content is visibly rendered
|
||||
@@ -0,0 +1,12 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Expense tracking UI renders correctly in both themes
|
||||
The system SHALL render the expense tracking workspace, history list, forms, and item states with readable contrast in both light and dark themes.
|
||||
|
||||
#### Scenario: Expense workspace renders in dark mode
|
||||
- **WHEN** the user opens the expense tracking view while dark mode is active
|
||||
- **THEN** the form card, history card, inputs, actions, and expense rows use dark-compatible colors and remain readable
|
||||
|
||||
#### Scenario: Expense workspace renders in light mode
|
||||
- **WHEN** the user opens the expense tracking view while light mode is active
|
||||
- **THEN** the form card, history card, inputs, actions, and expense rows use light-compatible colors and remain readable
|
||||
@@ -0,0 +1,12 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Monthly dashboard UI renders correctly in both themes
|
||||
The system SHALL render dashboard sections, insight cards, category bars, stat tiles, and empty states with readable contrast in both light and dark themes.
|
||||
|
||||
#### Scenario: Dashboard renders in dark mode
|
||||
- **WHEN** the user opens the dashboard while dark mode is active
|
||||
- **THEN** the summary cards, comparison cards, progress bars, and empty states use dark-compatible colors and remain readable
|
||||
|
||||
#### Scenario: Dashboard renders in light mode
|
||||
- **WHEN** the user opens the dashboard while light mode is active
|
||||
- **THEN** the summary cards, comparison cards, progress bars, and empty states use light-compatible colors and remain readable
|
||||
@@ -0,0 +1,12 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Paycheck tracking UI renders correctly in both themes
|
||||
The system SHALL render the paycheck tracking workspace, schedule panel, form, and list items with readable contrast in both light and dark themes.
|
||||
|
||||
#### Scenario: Paycheck workspace renders in dark mode
|
||||
- **WHEN** the user opens the paycheck tracking view while dark mode is active
|
||||
- **THEN** the schedule panel, form card, inputs, and paycheck rows use dark-compatible colors and remain readable
|
||||
|
||||
#### Scenario: Paycheck workspace renders in light mode
|
||||
- **WHEN** the user opens the paycheck tracking view while light mode is active
|
||||
- **THEN** the schedule panel, form card, inputs, and paycheck rows use light-compatible colors and remain readable
|
||||
@@ -21,5 +21,5 @@
|
||||
|
||||
## 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.
|
||||
- [x] 5.1 Visually verify light and dark modes across the dashboard, add-expense, and income pages in the browser.
|
||||
- [x] 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
Block a user