- Change header --c-header dark value from #01335e to #012851 (brand navy):
#01335e gave 4.3:1 with ink-3 (WCAG AA fail); #012851 gives 4.99:1 (pass)
- Switch header element from bg-surface to bg-header so dark mode uses the
independent --c-header token instead of inheriting the surface background
- Fix both dark blocks (media query and manual override) to stay in sync
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Header should use bg-header (rgb(1,51,94) = #01335e) in dark mode instead
of bg-surface. Currently fails because header still uses bg-surface.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two failing test suites that encode the regressions this issue fixes:
- accessibility.spec.ts: axe wcag2aa in both prefers-color-scheme:dark
and data-theme='dark' — fails because --c-ink-3:#6b7280 on #1a1a1a = 3.2:1
- theme.spec.ts: color-scheme computed property is 'dark' in dark mode
— fails because neither dark CSS block sets color-scheme: dark
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Inline <script> in app.html applies saved localStorage theme before first
paint to prevent flash of wrong theme
- ThemeToggle.svelte: moon/sun button, localStorage persistence, sets
data-theme on <html>, defaults to system preference on first visit
- Placed in +layout.svelte between language selector and user menu
- E2E tests cover visibility, toggle, reverse toggle, persistence, and
no-flash behaviour — all 6 passing
Refs #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
