Fixing the Reports Page: Dark Glass Style vs Light Theme

Version: v1.0.192 Category: Accessibility · UI/UX

---

Background

The Annual Statement Report is one of the most important pages in the platform — it's where landlords review their income, expenses, and tax position across a full property year. In v1.0.192 we identified and fixed a class of design token bugs that caused this page to render incorrectly when users were in light mode.

The Problem

The report components were built with hardcoded dark-mode-only Tailwind CSS utility classes — a pattern sometimes called "dark glass" styling. Classes like bg-white/5 and border-white/10 are designed to sit on top of dark backgrounds, where a subtle white tint creates depth and separation.

On a light background, these same classes are essentially invisible:

• border-white/10 — a 10% opaque white border on a white surface has no visible contrast at all.
• bg-white/5 — a 5% opaque white fill on a white card is indistinguishable from the card itself.
• text-green-400 — in light mode, this green is far too pale. It fails the WCAG AA success criterion of 4.5:1 contrast ratio for normal text, meaning users with low vision may not be able to read profit and income figures reliably.

The affected components were:

• AnnualStatementReport — the primary report container and its section wrappers.
• SummaryCard — the card components used to surface financial totals.
• <select> filter elements — the dropdowns used to filter the report by year or property.

Why This Matters for Landlords

The Annual Statement is a compliance-critical document. Landlords use it to:

• Verify totals before submitting quarterly updates to HMRC via Making Tax Digital.
• Cross-reference income and expense figures imported from AgentOS.
• Share a summary of their property finances with accountants.

Any rendering issue that obscures figures, borders, or controls on this page directly affects a landlord's ability to review and trust their data before a tax submission.

The Fix

All hardcoded opacity-based white tokens were replaced with semantic design tokens — Tailwind CSS classes that are bound to the application's theme system and automatically adapt to light and dark mode.

<!-- Before (dark-mode only, broken in light mode) -->
<div class="border border-white/10 bg-white/5">
  <span class="text-green-400">£1,200.00</span>
</div>

<!-- After (semantic, works in both themes) -->
<div class="border border-border bg-card">
  <span class="text-green-600 dark:text-green-400">£1,200.00</span>
</div>

The same pattern was applied to negative/expense values (text-red-600 dark:text-red-400) and to all <select> elements, which now use border-border bg-background — consistent with every other select input across the application.

Token mapping summary

Context	Before	After
Section borders	border-white/10	border-border
Card / section backgrounds	bg-white/5	bg-card, bg-muted
Positive value text	text-green-400	text-green-600 dark:text-green-400
Negative value text	text-red-400	text-red-600 dark:text-red-400
Select border	border-white/10	border-border
Select background	bg-white/5	bg-background

Accessibility Outcome

• Positive and negative financial values now meet WCAG AA 4.5:1 contrast in both light and dark mode.
• Report section borders and card backgrounds are visible and distinct regardless of theme.
• Select dropdowns are legible and styled consistently in all themes.

Upgrade Notes

This is a visual-only, non-breaking change. No data, API behaviour, or user settings are affected. Users will see an improved, fully readable Annual Statement Report the next time they load the Reports page.