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:

:root {
  --color-brand: #5F2104;
  --color-label-primary: #0A0F1A;
  --color-bg-primary: #ffffff;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand: #C4854A;
    --color-label-primary: #ededed;
    --color-bg-primary: #0a0a0a;
  }
}

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

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

Dark Mode

Dark Mode

Hoe Het Werkt

Token Override Tabel

Brand Kleur Fix

Testen

On this page