Dark Mode
Semantic token dark mode strategie
Dark Mode
Dark mode werkt via de semantic token layer — geen aparte stylesheets of component varianten nodig.
Hoe Het Werkt
De CSS custom properties worden overschreven via prefers-color-scheme:
Components gebruiken altijd tokens, nooit hex waarden — dark mode werkt automatisch.
Token Override Tabel
| Token | Light | Dark | Reden |
|---|---|---|---|
--color-brand | #5F2104 | #C4854A | Donker bruin onleesbaar op dark bg |
--color-label-primary | #0A0F1A | #ededed | Tekst moet licht zijn op dark bg |
--color-label-secondary | #334155 | #a1a1a1 | Verminderd contrast voor subtekst |
--color-label-tertiary | #8d95a3 | #737373 | Placeholder, minimaal contrast |
--color-bg-primary | #ffffff | #0a0a0a | Basis achtergrond |
--color-bg-secondary | #F8FAFC | #171717 | Subtle verschil van primary |
--color-bg-dark | #0A0F1A | #000000 | Diepste achtergrond |
--color-outline-default | #E2E8F0 | #2a2a2a | Borders subtiel |
--color-outline-strong | #CBD5E1 | #404040 | Borders benadrukt |
--color-outline-active | #0A0F1A | #ededed | Focus rings, active states |
Brand Kleur Fix
Het oorspronkelijke brand bruin (#5F2104) is onleesbaar op donkere achtergronden. In dark mode wordt het vervangen door #C4854A — een warmere, lichtere variant die 4.6:1 contrast behaalt op #0a0a0a (WCAG AA).
✕
Nooit hardcoded kleuren
Gebruik altijd tokens (text-brand, bg-surface-primary) in component code. Hardcoded hex waarden zoals text-[#5F2104] zullen niet switchen in dark mode.
Testen
- DevTools → Rendering → Emulate
prefers-color-scheme: dark - Controleer alle semantic tokens switchen
- Controleer contrast ratios in dark mode
- Test met echte OS dark mode toggle