Problem
app/globals.css defines a dark-only palette, hardcoded on :root:
:root {
--bg: #070b14;
--surface: #0f1727;
--text: #eaf2ff;
--muted: #9bb1d3;
--accent: #59c2ff;
}
There is no prefers-color-scheme handling anywhere in the file, and no
color-scheme declaration. Two consequences:
- Visitors who prefer light get dark regardless — including in contexts where
dark is genuinely worse, such as printing a compliance page or presenting on
a projector in a bright room.
- Because
color-scheme is not set, browser-rendered UI (form controls,
scrollbars, autofill) renders in light chrome against the dark page.
The token names are also literal rather than semantic (--bg, --accent-2),
which makes a second theme awkward to introduce cleanly.
What to do
- Rename to semantic tokens:
--surface, --surface-raised, --text-primary,
--text-muted, --border, --accent.
- Keep dark as the default — it suits the product — but define the full light
palette under @media (prefers-color-scheme: light), redefining only token
values, never component rules.
- Add
color-scheme: dark light so browser UI matches.
- Optional explicit toggle persisting the choice, with no flash of the wrong
theme on first paint.
- Verify every text/background pair against WCAG AA (4.5:1 body, 3:1 large) in
both themes. --muted: #9bb1d3 on --surface: #0f1727 is the pair most
likely to fail and it is used for body copy across most pages.
Acceptance criteria
Notes
Fix contrast at the token layer rather than per component, otherwise the next
component reintroduces the failure. Related: the typography issue covering the
Inter font that is declared but never loaded.
Problem
app/globals.cssdefines a dark-only palette, hardcoded on:root:There is no
prefers-color-schemehandling anywhere in the file, and nocolor-schemedeclaration. Two consequences:dark is genuinely worse, such as printing a compliance page or presenting on
a projector in a bright room.
color-schemeis not set, browser-rendered UI (form controls,scrollbars, autofill) renders in light chrome against the dark page.
The token names are also literal rather than semantic (
--bg,--accent-2),which makes a second theme awkward to introduce cleanly.
What to do
--surface,--surface-raised,--text-primary,--text-muted,--border,--accent.palette under
@media (prefers-color-scheme: light), redefining only tokenvalues, never component rules.
color-scheme: dark lightso browser UI matches.theme on first paint.
both themes.
--muted: #9bb1d3on--surface: #0f1727is the pair mostlikely to fail and it is used for body copy across most pages.
Acceptance criteria
prefers-color-scheme: light, tokens onlycolor-schemedeclared so browser UI matches the pageNotes
Fix contrast at the token layer rather than per component, otherwise the next
component reintroduces the failure. Related: the typography issue covering the
Interfont that is declared but never loaded.