fix: dark mode styling across 5 pages #4

JoeBot · 2026-03-09T14:03:15-04:00

JoeBot commented

2026-03-09 14:03:15 -04:00

Summary

Replace hardcoded light background colors with theme-aware alternatives using usePreferencesStore
Fix sticky column backgrounds, borders, and income/expense section headers in dark mode
Affected pages: Cash Flow, Monthly Actuals, Budgets, Budget vs. Actual, Quarterly Financial Report

Color Mapping

Light Mode	Dark Mode	Purpose
`white`	`--mantine-color-dark-7`	Sticky column/header backgrounds
`#e6f9e6`	`--mantine-color-green-9`	Income section headers
`#fde8e8`	`--mantine-color-red-9`	Expense section headers
`#e9ecef`	`--mantine-color-dark-4`	Sticky column borders
`--mantine-color-gray-0`	`--mantine-color-dark-5`	Striped row backgrounds
`--mantine-color-orange-0`	`--mantine-color-orange-9`	Forecast row backgrounds

Test Plan

Cash Flow Monthly Detail: forecast/striped rows dark-mode readable
Monthly Actuals: sticky columns dark, Income/Expense headers readable
Budgets: sticky columns dark, Income/Expense headers readable
Budget vs. Actual: section headers readable in dark mode
Quarterly Financial: Income/Expense/Total rows readable in dark mode
Light mode unchanged (conditional logic preserves original colors)
Build passes with no TypeScript errors

🤖 Generated with Claude Code

## Summary - Replace hardcoded light background colors with theme-aware alternatives using `usePreferencesStore` - Fix sticky column backgrounds, borders, and income/expense section headers in dark mode - Affected pages: Cash Flow, Monthly Actuals, Budgets, Budget vs. Actual, Quarterly Financial Report ## Color Mapping | Light Mode | Dark Mode | Purpose | |---|---|---| | `white` | `--mantine-color-dark-7` | Sticky column/header backgrounds | | `#e6f9e6` | `--mantine-color-green-9` | Income section headers | | `#fde8e8` | `--mantine-color-red-9` | Expense section headers | | `#e9ecef` | `--mantine-color-dark-4` | Sticky column borders | | `--mantine-color-gray-0` | `--mantine-color-dark-5` | Striped row backgrounds | | `--mantine-color-orange-0` | `--mantine-color-orange-9` | Forecast row backgrounds | ## Test Plan - [x] Cash Flow Monthly Detail: forecast/striped rows dark-mode readable - [x] Monthly Actuals: sticky columns dark, Income/Expense headers readable - [x] Budgets: sticky columns dark, Income/Expense headers readable - [x] Budget vs. Actual: section headers readable in dark mode - [x] Quarterly Financial: Income/Expense/Total rows readable in dark mode - [x] Light mode unchanged (conditional logic preserves original colors) - [x] Build passes with no TypeScript errors 🤖 Generated with [Claude Code](https://claude.com/claude-code)

JoeBot added 1 commit 2026-03-09 14:03:16 -04:00

fix: resolve hardcoded light backgrounds breaking dark mode across 5 pages 14160854b9

Replace hardcoded light colors (#e6f9e6, #fde8e8, white, #e9ecef) with
theme-aware alternatives using usePreferencesStore. Affected pages:
- CashFlowForecastPage: forecast row and striped row backgrounds
- MonthlyActualsPage: sticky column backgrounds, borders, section headers
- BudgetsPage: sticky column backgrounds, borders, section headers
- BudgetVsActualPage: income/expense section header backgrounds
- QuarterlyReportPage: income/expense and total row backgrounds

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

JoeBot merged commit 538828b91a into main

2026-03-09 14:04:50 -04:00

JoeBot deleted branch fix/dark-mode-styling

2026-03-09 14:04:51 -04:00

JoeBot referenced this issue from a commit

2026-03-09 14:04:52 -04:00

Merge pull request 'fix: dark mode styling across 5 pages' (#4) from fix/dark-mode-styling into main

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: JoeBot/HOA_Financial_Platform#4