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

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>
2026-03-09 14:04:50 -04:00 · 2026-03-09 14:02:46 -04:00 · 2026-03-09 13:31:17 -04:00
12 changed files with 102 additions and 91 deletions
--- a/backend/src/modules/organizations/organizations.service.ts
+++ b/backend/src/modules/organizations/organizations.service.ts
@@ -153,14 +153,6 @@ export class OrganizationsService {
        existing.role = data.role;
        return this.userOrgRepository.save(existing);
      }
-      // Update password for existing user being added to a new org
-      if (data.password) {
-        const passwordHash = await bcrypt.hash(data.password, 12);
-        await dataSource.query(
-          `UPDATE shared.users SET password_hash = $1 WHERE id = $2`,
-          [passwordHash, userId],
-        );
-      }
    } else {
      // Create new user
      const passwordHash = await bcrypt.hash(data.password, 12);
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,5 +9,20 @@
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
+    <script>
+  (function(d,t) {
+    var BASE_URL="https//chat.hoaledger.com";
+    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+    g.src=BASE_URL+"/packs/js/sdk.js";
+    g.async = true;
+    s.parentNode.insertBefore(g,s);
+    g.onload=function(){
+      window.chatwootSDK.run({
+        websiteToken: 'K6VXvTtKXvaCMvre4yK85SPb',
+        baseUrl: BASE_URL
+      })
+    }
+  })(document,"script");
+</script>
  </body>
 </html>
--- a/frontend/src/pages/accounts/AccountsPage.tsx
+++ b/frontend/src/pages/accounts/AccountsPage.tsx
@@ -587,7 +587,7 @@ export function AccountsPage() {
            {investments.filter(i => i.is_active).length > 0 && (
              <>
                <Divider label="Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={investments.filter(i => i.is_active)} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
+                <InvestmentMiniTable investments={investments.filter(i => i.is_active)} onEdit={handleEditInvestment} />
              </>
            )}
          </Stack>
@@ -605,7 +605,7 @@ export function AccountsPage() {
            {operatingInvestments.length > 0 && (
              <>
                <Divider label="Operating Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={operatingInvestments} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
+                <InvestmentMiniTable investments={operatingInvestments} onEdit={handleEditInvestment} />
              </>
            )}
          </Stack>
@@ -623,7 +623,7 @@ export function AccountsPage() {
            {reserveInvestments.length > 0 && (
              <>
                <Divider label="Reserve Investment Accounts" labelPosition="center" my="xs" />
-                <InvestmentMiniTable investments={reserveInvestments} onEdit={handleEditInvestment} isReadOnly={isReadOnly} />
+                <InvestmentMiniTable investments={reserveInvestments} onEdit={handleEditInvestment} />
              </>
            )}
          </Stack>
@@ -1087,11 +1087,9 @@ function AccountTable({
 function InvestmentMiniTable({
  investments,
  onEdit,
-  isReadOnly = false,
 }: {
  investments: Investment[];
  onEdit: (inv: Investment) => void;
-  isReadOnly?: boolean;
 }) {
  const totalPrincipal = investments.reduce((s, i) => s + parseFloat(i.principal || '0'), 0);
  const totalValue = investments.reduce(
@@ -1134,7 +1132,7 @@ function InvestmentMiniTable({
            <Table.Th ta="right">Maturity Value</Table.Th>
            <Table.Th>Maturity Date</Table.Th>
            <Table.Th ta="right">Days Remaining</Table.Th>
-            {!isReadOnly && <Table.Th></Table.Th>}
+            <Table.Th></Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
@@ -1184,7 +1182,6 @@ function InvestmentMiniTable({
                  '-'
                )}
              </Table.Td>
-              {!isReadOnly && (
              <Table.Td>
                <Tooltip label="Edit investment">
                  <ActionIcon variant="subtle" onClick={() => onEdit(inv)}>
@@ -1192,7 +1189,6 @@ function InvestmentMiniTable({
                  </ActionIcon>
                </Tooltip>
              </Table.Td>
-              )}
            </Table.Tr>
          ))}
        </Table.Tbody>
--- a/frontend/src/pages/budgets/BudgetsPage.tsx
+++ b/frontend/src/pages/budgets/BudgetsPage.tsx
@@ -8,6 +8,7 @@ import { IconDeviceFloppy, IconUpload, IconDownload, IconInfoCircle } from '@tab
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
 import { useIsReadOnly } from '../../stores/authStore';
+import { usePreferencesStore } from '../../stores/preferencesStore';

 interface BudgetLine {
  account_id: string;
@@ -98,6 +99,11 @@ export function BudgetsPage() {
  const queryClient = useQueryClient();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const isReadOnly = useIsReadOnly();
+  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
+  const stickyBg = isDark ? 'var(--mantine-color-dark-7)' : 'white';
+  const stickyBorder = isDark ? 'var(--mantine-color-dark-4)' : '#e9ecef';
+  const incomeSectionBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
+  const expenseSectionBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const { isLoading } = useQuery<BudgetLine[]>({
    queryKey: ['budgets', year],
@@ -317,8 +323,8 @@ export function BudgetsPage() {
        <Table striped highlightOnHover style={{ minWidth: 1600 }}>
          <Table.Thead>
            <Table.Tr>
-              <Table.Th style={{ position: 'sticky', left: 0, background: 'white', zIndex: 2, minWidth: 120 }}>Acct #</Table.Th>
-              <Table.Th style={{ position: 'sticky', left: 120, background: 'white', zIndex: 2, minWidth: 220 }}>Account Name</Table.Th>
+              <Table.Th style={{ position: 'sticky', left: 0, background: stickyBg, zIndex: 2, minWidth: 120 }}>Acct #</Table.Th>
+              <Table.Th style={{ position: 'sticky', left: 120, background: stickyBg, zIndex: 2, minWidth: 220 }}>Account Name</Table.Th>
              {monthLabels.map((m) => (
                <Table.Th key={m} ta="right" style={{ minWidth: 90 }}>{m}</Table.Th>
              ))}
@@ -337,7 +343,7 @@ export function BudgetsPage() {
              const lines = budgetData.filter((b) => b.account_type === type);
              if (lines.length === 0) return null;

-              const sectionBg = type === 'income' ? '#e6f9e6' : '#fde8e8';
+              const sectionBg = type === 'income' ? incomeSectionBg : expenseSectionBg;
              const sectionTotal = lines.reduce((sum, line) => sum + (line.annual_total || 0), 0);

              return [
@@ -368,9 +374,9 @@ export function BudgetsPage() {
                        style={{
                          position: 'sticky',
                          left: 0,
-                          background: 'white',
+                          background: stickyBg,
                          zIndex: 1,
-                          borderRight: '1px solid #e9ecef',
+                          borderRight: `1px solid ${stickyBorder}`,
                        }}
                      >
                        <Text size="sm" c="dimmed" ff="monospace">{line.account_number}</Text>
@@ -379,9 +385,9 @@ export function BudgetsPage() {
                        style={{
                          position: 'sticky',
                          left: 120,
-                          background: 'white',
+                          background: stickyBg,
                          zIndex: 1,
-                          borderRight: '1px solid #e9ecef',
+                          borderRight: `1px solid ${stickyBorder}`,
                        }}
                      >
                        <Group gap={6} wrap="nowrap">
--- a/frontend/src/pages/capital-projects/CapitalProjectsPage.tsx
+++ b/frontend/src/pages/capital-projects/CapitalProjectsPage.tsx
@@ -72,10 +72,9 @@ interface KanbanCardProps {
  project: Project;
  onEdit: (p: Project) => void;
  onDragStart: (e: DragEvent<HTMLDivElement>, project: Project) => void;
-  isReadOnly?: boolean;
 }

-function KanbanCard({ project, onEdit, onDragStart, isReadOnly }: KanbanCardProps) {
+function KanbanCard({ project, onEdit, onDragStart }: KanbanCardProps) {
  const plannedLabel = formatPlannedDate(project.planned_date);
  // For projects in the Future bucket with a specific year, show the year
  const currentYear = new Date().getFullYear();
@@ -87,23 +86,21 @@ function KanbanCard({ project, onEdit, onDragStart, isReadOnly }: KanbanCardProp
      padding="sm"
      radius="md"
      withBorder
-      draggable={!isReadOnly}
-      onDragStart={!isReadOnly ? (e) => onDragStart(e, project) : undefined}
-      style={{ cursor: isReadOnly ? 'default' : 'grab', userSelect: 'none' }}
+      draggable
+      onDragStart={(e) => onDragStart(e, project)}
+      style={{ cursor: 'grab', userSelect: 'none' }}
      mb="xs"
    >
      <Group justify="space-between" wrap="nowrap" mb={4}>
        <Group gap={6} wrap="nowrap" style={{ overflow: 'hidden' }}>
-          {!isReadOnly && <IconGripVertical size={14} style={{ flexShrink: 0, color: 'var(--mantine-color-dimmed)' }} />}
+          <IconGripVertical size={14} style={{ flexShrink: 0, color: 'var(--mantine-color-dimmed)' }} />
          <Text fw={600} size="sm" truncate>
            {project.name}
          </Text>
        </Group>
-        {!isReadOnly && (
        <ActionIcon variant="subtle" size="sm" onClick={() => onEdit(project)}>
          <IconEdit size={14} />
        </ActionIcon>
-        )}
      </Group>

      <Group gap={6} mb={6}>
@@ -151,12 +148,11 @@ interface KanbanColumnProps {
  isDragOver: boolean;
  onDragOverHandler: (e: DragEvent<HTMLDivElement>, year: number) => void;
  onDragLeave: () => void;
-  isReadOnly?: boolean;
 }

 function KanbanColumn({
  year, projects, onEdit, onDragStart, onDrop,
-  isDragOver, onDragOverHandler, onDragLeave, isReadOnly,
+  isDragOver, onDragOverHandler, onDragLeave,
 }: KanbanColumnProps) {
  const totalEst = projects.reduce((s, p) => s + parseFloat(p.estimated_cost || '0'), 0);
  const isFuture = year === FUTURE_YEAR;
@@ -182,9 +178,9 @@ function KanbanColumn({
        border: isDragOver ? '2px dashed var(--mantine-color-blue-4)' : undefined,
        transition: 'background-color 150ms ease, border 150ms ease',
      }}
-      onDragOver={!isReadOnly ? (e) => onDragOverHandler(e, year) : undefined}
-      onDragLeave={!isReadOnly ? onDragLeave : undefined}
-      onDrop={!isReadOnly ? (e) => onDrop(e, year) : undefined}
+      onDragOver={(e) => onDragOverHandler(e, year)}
+      onDragLeave={onDragLeave}
+      onDrop={(e) => onDrop(e, year)}
    >
      <Group justify="space-between" mb="sm">
        <Title order={5}>{yearLabel(year)}</Title>
@@ -203,7 +199,7 @@ function KanbanColumn({
      <Box style={{ flex: 1, minHeight: 60 }}>
        {projects.length === 0 ? (
          <Text size="xs" c="dimmed" ta="center" py="lg">
-            {isReadOnly ? 'No projects' : 'Drop projects here'}
+            Drop projects here
          </Text>
        ) : useWideLayout ? (
          <div style={{
@@ -212,12 +208,12 @@ function KanbanColumn({
            gap: 'var(--mantine-spacing-xs)',
          }}>
            {projects.map((p) => (
-              <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} isReadOnly={isReadOnly} />
+              <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} />
            ))}
          </div>
        ) : (
          projects.map((p) => (
-            <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} isReadOnly={isReadOnly} />
+            <KanbanCard key={p.id} project={p} onEdit={onEdit} onDragStart={onDragStart} />
          ))
        )}
      </Box>
@@ -599,7 +595,6 @@ export function CapitalProjectsPage() {
              isDragOver={dragOverYear === year}
              onDragOverHandler={handleDragOver}
              onDragLeave={handleDragLeave}
-              isReadOnly={isReadOnly}
            />
          );
        })}
--- a/frontend/src/pages/cash-flow/CashFlowForecastPage.tsx
+++ b/frontend/src/pages/cash-flow/CashFlowForecastPage.tsx
@@ -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>
--- a/frontend/src/pages/dashboard/DashboardPage.tsx
+++ b/frontend/src/pages/dashboard/DashboardPage.tsx
@@ -18,7 +18,7 @@ import {
 } from '@tabler/icons-react';
 import { useState, useCallback } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useAuthStore, useIsReadOnly } from '../../stores/authStore';
+import { useAuthStore } from '../../stores/authStore';
 import api from '../../services/api';

 interface HealthScore {
@@ -311,7 +311,6 @@ interface DashboardData {

 export function DashboardPage() {
  const currentOrg = useAuthStore((s) => s.currentOrg);
-  const isReadOnly = useIsReadOnly();
  const queryClient = useQueryClient();

  // Track whether a refresh is in progress (per score type) for async polling
@@ -425,7 +424,7 @@ export function DashboardPage() {
                </ThemeIcon>
              }
              isRefreshing={operatingRefreshing}
-              onRefresh={!isReadOnly ? handleRefreshOperating : undefined}
+              onRefresh={handleRefreshOperating}
              lastFailed={!!healthScores?.operating_last_failed}
            />
            <HealthScoreCard
@@ -437,7 +436,7 @@ export function DashboardPage() {
                </ThemeIcon>
              }
              isRefreshing={reserveRefreshing}
-              onRefresh={!isReadOnly ? handleRefreshReserve : undefined}
+              onRefresh={handleRefreshReserve}
              lastFailed={!!healthScores?.reserve_last_failed}
            />
          </SimpleGrid>
--- a/frontend/src/pages/investment-planning/InvestmentPlanningPage.tsx
+++ b/frontend/src/pages/investment-planning/InvestmentPlanningPage.tsx
@@ -36,7 +36,6 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { notifications } from '@mantine/notifications';
 import api from '../../services/api';
-import { useIsReadOnly } from '../../stores/authStore';

 // ── Types ──

@@ -348,7 +347,6 @@ function RecommendationsDisplay({
 export function InvestmentPlanningPage() {
  const [ratesExpanded, setRatesExpanded] = useState(true);
  const [isTriggering, setIsTriggering] = useState(false);
-  const isReadOnly = useIsReadOnly();

  // Load financial snapshot on mount
  const { data: snapshot, isLoading: snapshotLoading } = useQuery<FinancialSnapshot>({
@@ -698,7 +696,6 @@ export function InvestmentPlanningPage() {
              </Text>
            </div>
          </Group>
-          {!isReadOnly && (
          <Button
            leftSection={<IconSparkles size={16} />}
            onClick={handleTriggerAI}
@@ -708,7 +705,6 @@ export function InvestmentPlanningPage() {
          >
            {aiResult ? 'Refresh Recommendations' : 'Get AI Recommendations'}
          </Button>
-          )}
        </Group>

        {/* Processing State */}
--- a/frontend/src/pages/invoices/InvoicesPage.tsx
+++ b/frontend/src/pages/invoices/InvoicesPage.tsx
@@ -9,7 +9,6 @@ import { notifications } from '@mantine/notifications';
 import { IconSend, IconInfoCircle, IconCheck, IconX } from '@tabler/icons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
-import { useIsReadOnly } from '../../stores/authStore';

 interface Invoice {
  id: string; invoice_number: string; unit_number: string; unit_id: string;
@@ -65,7 +64,6 @@ export function InvoicesPage() {
  const [preview, setPreview] = useState<Preview | null>(null);
  const [previewLoading, setPreviewLoading] = useState(false);
  const queryClient = useQueryClient();
-  const isReadOnly = useIsReadOnly();

  const { data: invoices = [], isLoading } = useQuery<Invoice[]>({
    queryKey: ['invoices'],
@@ -126,12 +124,10 @@ export function InvoicesPage() {
    <Stack>
      <Group justify="space-between">
        <Title order={2}>Invoices</Title>
-        {!isReadOnly && (
        <Group>
          <Button variant="outline" onClick={() => lateFeesMutation.mutate()} loading={lateFeesMutation.isPending}>Apply Late Fees</Button>
          <Button leftSection={<IconSend size={16} />} onClick={openBulk}>Generate Invoices</Button>
        </Group>
-        )}
      </Group>
      <Group>
        <Card withBorder p="sm"><Text size="xs" c="dimmed">Total Invoices</Text><Text fw={700}>{invoices.length}</Text></Card>
--- a/frontend/src/pages/monthly-actuals/MonthlyActualsPage.tsx
+++ b/frontend/src/pages/monthly-actuals/MonthlyActualsPage.tsx
@@ -10,6 +10,7 @@ import {
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '../../services/api';
 import { useIsReadOnly } from '../../stores/authStore';
+import { usePreferencesStore } from '../../stores/preferencesStore';
 import { AttachmentPanel } from '../../components/attachments/AttachmentPanel';

 interface ActualLine {
@@ -66,6 +67,11 @@ export function MonthlyActualsPage() {
  const [savedJEId, setSavedJEId] = useState<string | null>(null);
  const queryClient = useQueryClient();
  const isReadOnly = useIsReadOnly();
+  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
+  const stickyBg = isDark ? 'var(--mantine-color-dark-7)' : 'white';
+  const stickyBorder = isDark ? 'var(--mantine-color-dark-4)' : '#e9ecef';
+  const incomeBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
+  const expenseBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const yearOptions = Array.from({ length: 5 }, (_, i) => {
    const y = new Date().getFullYear() - 2 + i;
@@ -178,16 +184,16 @@ export function MonthlyActualsPage() {
          <Table.Tr key={line.account_id}>
            <Table.Td
              style={{
-                position: 'sticky', left: 0, background: 'white', zIndex: 1,
-                borderRight: '1px solid #e9ecef',
+                position: 'sticky', left: 0, background: stickyBg, zIndex: 1,
+                borderRight: `1px solid ${stickyBorder}`,
              }}
            >
              <Text size="sm" c="dimmed" ff="monospace">{line.account_number}</Text>
            </Table.Td>
            <Table.Td
              style={{
-                position: 'sticky', left: 120, background: 'white', zIndex: 1,
-                borderRight: '1px solid #e9ecef',
+                position: 'sticky', left: 120, background: stickyBg, zIndex: 1,
+                borderRight: `1px solid ${stickyBorder}`,
              }}
            >
              <Group gap={6} wrap="nowrap">
@@ -292,10 +298,10 @@ export function MonthlyActualsPage() {
        <Table striped highlightOnHover style={{ minWidth: 700 }}>
          <Table.Thead>
            <Table.Tr>
-              <Table.Th style={{ position: 'sticky', left: 0, background: 'white', zIndex: 2, minWidth: 120 }}>
+              <Table.Th style={{ position: 'sticky', left: 0, background: stickyBg, zIndex: 2, minWidth: 120 }}>
                Acct #
              </Table.Th>
-              <Table.Th style={{ position: 'sticky', left: 120, background: 'white', zIndex: 2, minWidth: 220 }}>
+              <Table.Th style={{ position: 'sticky', left: 120, background: stickyBg, zIndex: 2, minWidth: 220 }}>
                Account Name
              </Table.Th>
              <Table.Th ta="right" style={{ minWidth: 110 }}>Budget</Table.Th>
@@ -304,8 +310,8 @@ export function MonthlyActualsPage() {
            </Table.Tr>
          </Table.Thead>
          <Table.Tbody>
-            {renderSection('Income', incomeLines, '#e6f9e6', totals.incomeBudget, totals.incomeActual)}
-            {renderSection('Expenses', expenseLines, '#fde8e8', totals.expenseBudget, totals.expenseActual)}
+            {renderSection('Income', incomeLines, incomeBg, totals.incomeBudget, totals.incomeActual)}
+            {renderSection('Expenses', expenseLines, expenseBg, totals.expenseBudget, totals.expenseActual)}
          </Table.Tbody>
        </Table>
      </div>
--- a/frontend/src/pages/reports/BudgetVsActualPage.tsx
+++ b/frontend/src/pages/reports/BudgetVsActualPage.tsx
@@ -5,6 +5,7 @@ import {
 } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import api from '../../services/api';
+import { usePreferencesStore } from '../../stores/preferencesStore';

 interface BudgetVsActualLine {
  account_id: string;
@@ -46,6 +47,9 @@ const monthFilterOptions = [
 export function BudgetVsActualPage() {
  const [year, setYear] = useState(new Date().getFullYear().toString());
  const [month, setMonth] = useState('');
+  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
+  const incomeBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
+  const expenseBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const yearOptions = Array.from({ length: 5 }, (_, i) => {
    const y = new Date().getFullYear() - 2 + i;
@@ -92,7 +96,7 @@ export function BudgetVsActualPage() {

  const renderSection = (title: string, sectionLines: BudgetVsActualLine[], isExpense: boolean, totalBudget: number, totalActual: number) => (
    <>
-      <Table.Tr style={{ background: isExpense ? '#fde8e8' : '#e6f9e6' }}>
+      <Table.Tr style={{ background: isExpense ? expenseBg : incomeBg }}>
        <Table.Td colSpan={6} fw={700}>{title}</Table.Td>
      </Table.Tr>
      {sectionLines.map((line) => {
--- a/frontend/src/pages/reports/QuarterlyReportPage.tsx
+++ b/frontend/src/pages/reports/QuarterlyReportPage.tsx
@@ -8,6 +8,7 @@ import {
  IconTrendingUp, IconTrendingDown, IconAlertTriangle, IconChartBar,
 } from '@tabler/icons-react';
 import api from '../../services/api';
+import { usePreferencesStore } from '../../stores/preferencesStore';

 interface BudgetVsActualItem {
  account_id: string;
@@ -48,6 +49,9 @@ export function QuarterlyReportPage() {
  const currentQuarter = Math.ceil((now.getMonth() + 1) / 3);
  const defaultQuarter = currentQuarter;
  const defaultYear = now.getFullYear();
+  const isDark = usePreferencesStore((s) => s.colorScheme) === 'dark';
+  const incomeBg = isDark ? 'var(--mantine-color-green-9)' : '#e6f9e6';
+  const expenseBg = isDark ? 'var(--mantine-color-red-9)' : '#fde8e8';

  const [year, setYear] = useState(String(defaultYear));
  const [quarter, setQuarter] = useState(String(defaultQuarter));
@@ -207,7 +211,7 @@ export function QuarterlyReportPage() {
              </Table.Thead>
              <Table.Tbody>
                {incomeItems.length > 0 && (
-                  <Table.Tr style={{ background: '#e6f9e6' }}>
+                  <Table.Tr style={{ background: incomeBg }}>
                    <Table.Td colSpan={8} fw={700}>Income</Table.Td>
                  </Table.Tr>
                )}
@@ -215,7 +219,7 @@ export function QuarterlyReportPage() {
                  <BVARow key={item.account_id} item={item} isExpense={false} />
                ))}
                {incomeItems.length > 0 && (
-                  <Table.Tr style={{ background: '#e6f9e6' }}>
+                  <Table.Tr style={{ background: incomeBg }}>
                    <Table.Td colSpan={2} fw={700}>Total Income</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(incomeItems.reduce((s, i) => s + i.quarter_budget, 0))}</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(incomeItems.reduce((s, i) => s + i.quarter_actual, 0))}</Table.Td>
@@ -226,7 +230,7 @@ export function QuarterlyReportPage() {
                  </Table.Tr>
                )}
                {expenseItems.length > 0 && (
-                  <Table.Tr style={{ background: '#fde8e8' }}>
+                  <Table.Tr style={{ background: expenseBg }}>
                    <Table.Td colSpan={8} fw={700}>Expenses</Table.Td>
                  </Table.Tr>
                )}
@@ -234,7 +238,7 @@ export function QuarterlyReportPage() {
                  <BVARow key={item.account_id} item={item} isExpense={true} />
                ))}
                {expenseItems.length > 0 && (
-                  <Table.Tr style={{ background: '#fde8e8' }}>
+                  <Table.Tr style={{ background: expenseBg }}>
                    <Table.Td colSpan={2} fw={700}>Total Expenses</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(expenseItems.reduce((s, i) => s + i.quarter_budget, 0))}</Table.Td>
                    <Table.Td ta="right" fw={700} ff="monospace">{fmt(expenseItems.reduce((s, i) => s + i.quarter_actual, 0))}</Table.Td>