fix: resolve hardcoded light backgrounds breaking dark mode across 5 pages
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>
This commit is contained in:
@@ -8,6 +8,7 @@ import {
|
||||
IconArrowLeft, IconArrowRight, IconCalendar,
|
||||
} from '@tabler/icons-react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { usePreferencesStore } from '../../stores/preferencesStore';
|
||||
import {
|
||||
AreaChart, Area, XAxis, YAxis, CartesianGrid,
|
||||
Tooltip as RechartsTooltip, ResponsiveContainer, Legend,
|
||||
@@ -79,6 +80,7 @@ export function CashFlowForecastPage() {
|
||||
const now = new Date();
|
||||
const currentYear = now.getFullYear();
|
||||
const currentMonth = now.getMonth() + 1;
|
||||
const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
|
||||
|
||||
// Filter: All, Operating, Reserve
|
||||
const [fundFilter, setFundFilter] = useState<string>('all');
|
||||
@@ -418,10 +420,10 @@ export function CashFlowForecastPage() {
|
||||
<tr
|
||||
key={d.month}
|
||||
style={{
|
||||
borderBottom: '1px solid var(--mantine-color-gray-2)',
|
||||
borderBottom: `1px solid ${isDark ? 'var(--mantine-color-dark-4)' : 'var(--mantine-color-gray-2)'}`,
|
||||
backgroundColor: d.is_forecast
|
||||
? 'var(--mantine-color-orange-0)'
|
||||
: i % 2 === 0 ? 'transparent' : 'var(--mantine-color-gray-0)',
|
||||
? (isDark ? 'var(--mantine-color-orange-9)' : 'var(--mantine-color-orange-0)')
|
||||
: i % 2 === 0 ? 'transparent' : (isDark ? 'var(--mantine-color-dark-5)' : 'var(--mantine-color-gray-0)'),
|
||||
}}
|
||||
>
|
||||
<td style={{ padding: '6px 12px', fontWeight: 500 }}>{d.month}</td>
|
||||
|
||||
Reference in New Issue
Block a user