Automatisch Thema Detectie met prefers-color-scheme
Hoe je gebruikerssysteem voorkeur detecteert en automatisch het juiste thema laadt. Inclusief fallback voor oudere browsers.
Waarom Automatische Detectie Belangrijk Is
Je hebt waarschijnlijk al gemerkt dat veel websites zich nu aanpassen aan je systeem instellingen. Als je je laptop of telefoon op dark mode zet, volgen goede websites je voorkeur automatisch. Dat’s veel beter dan gebruikers dwingen handmatig te kiezen.
De
prefers-color-scheme
media query maakt dit mogelijk. Het’s een CSS-functie die je systeem voorkeur leest en je thema daarop afstelt. Geen JavaScript nodig, geen extra klikken — gewoon intelligente design.
Kernvoordelen
- Gebruikers krijgen hun voorkeur thema direct
- Energiebesparing op OLED-schermen
- Betere leerbaarheid ‘s avonds
- Professioneel en modern voelend
Hoe Detectie Werkt
Je browser kent je systeemvoorkeur. Windows, Mac, Linux, iOS, Android — ze hebben allemaal instellingen voor light of dark mode. Je website kan daar naar luisteren.
Dit gebeurt via CSS media queries. Je schrijft aparte CSS-regels voor licht en donker thema. De browser kiest automatisch welke set regels toepassen op basis van de gebruiker’s systeem instellingen. Simpel. Elegant.
En het beste deel? Je hoeft niet te wachten tot je CSS laadt. Dit gebeurt voor de pagina’s eerste render. Geen flikkering, geen vertraging — het thema is er gewoon.
De CSS Syntax
De syntax is straightforward. Je gebruikt dezelfde media query syntax als voor responsief design.
@media (prefers-color-scheme: dark) {
body {
background-color: #0a0515;
color: #fce7f3;
}
a {
color: #ec4899;
}
}
Dit is je donker thema CSS. De browser past dit toe als de gebruiker dark mode heeft ingesteld. Je schrijft ook een licht versie — of je default CSS is al licht.
Veel teams gebruiken CSS custom properties (variabelen) om dit beheerbaar te houden. In plaats van kleuren overal hardcoded in te zetten, definieer je variabelen die je wisselt per thema.
CSS Variabelen voor Beide Thema’s
Dit is waar het powerful wordt. Definieer je kleurvariabelen in :root, dan override je ze in je media query.
:root {
--bg-primary: #ffffff;
--text-primary: #0f172a;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #0a0515;
--text-primary: #fce7f3;
}
}
Nu gebruik je in je CSS gewoon
background-color: var(--bg-primary)
. Dezelfde CSS, twee verschillende kleuren. Veel minder werk. En updates? Je wijzigt één variabele, niet honderd CSS-regels.
Fallback voor Oudere Browsers
Niet alle browsers ondersteunen prefers-color-scheme. IE11 zeker niet. Dus wat doe je?
Je fallback is je default CSS. Als een browser prefers-color-scheme niet begrijpt, gebruikt het gewoon je normale CSS. Zorg dat je default thema goed werkt. Voor moderne browsers voegt prefers-color-scheme een automatische optie toe.
Voor echte ondersteuning van dark mode in oudere browsers, gebruik je een JavaScript toggle. Gebruikers klikken een knop, je slaagt hun voorkeur op in localStorage, en je past het thema handmatig toe. Dat’s meer werk, maar je bereikt iedereen.
Moderne browsers ondersteunen prefers-color-scheme
Gebruikers met oudere browsers (fallback nodig)
Testen van Je Implementatie
Voor je live gaat, test je beide thema’s goed. Hier’s hoe:
Systeeminstelling Wijzigen
Windows: Instellingen Kleuren Licht/Donker. Mac: Systeemvoorkeuren Uiterlijk. Linux: Je desktop environment settings. Wissel heen en weer, herlaad je site.
DevTools Media Query Emuleren
Open DevTools (F12), druk op Ctrl+Shift+P, typ “color scheme” en selecteer je voorkeur. Geen systeemwijziging nodig — je test direct in de browser.
Contrast Controleren
Gebruik tools zoals WebAIM Contrast Checker. Zorg dat tekst minstens 4.5:1 contrast heeft in beide thema’s. Slecht contrast = onleesbaar, vooral voor mensen met zichtstoornissen.
Best Practices voor Dark Mode
Geen Zuiver Wit
#ffffff in dark mode vermoeit ogen. Gebruik #f1f5f9 of #e0e0e0. Zuiver wit tegen zwart is te hard contrast.
Geen Zuiver Zwart
Hetzelfde in omgekeerde richting. #000000 voelt koud. #0f172a of #1a202c voelt warmer en minder hard.
Kleurschema’s Aanpassen
Je accent kleur ziet er anders uit op licht en donker. Testgroen kan bruinig lijken in dark mode. Pas je palet aan voor beide thema’s.
Afbeeldingen Testen
Foto’s zien er anders uit tegen donkere achtergronden. Lichte randen kunnen verschijnen. Voeg border-radius of subtle borders toe waar nodig.
Animaties Respecteren
Sommige gebruikers willen minder animatie. Gebruik
prefers-reduced-motion
om beweging te verminderen voor mensen die het nodig hebben.
Gebruiker Keuze Opslaan
Als je een toggle aanbiedt, onthoud de voorkeur in localStorage. Gebruikers waarderen consistentie tussen bezoeken.
Klaar voor Automatische Thema Detectie?
Automatische thema detectie voelt klein, maar het maakt je site voelen modern en respectvol. Gebruikers krijgen wat zij willen zonder extra werk. Je code is schoner met CSS variabelen. En je site werkt op elk apparaat.
Begin met de basis: definieer je kleurvariabelen, voeg prefers-color-scheme media queries toe, en test beide thema’s goed. Voeg dan een toggle toe als je gebruikers handmatige controle wilt geven. Stap voor stap.
Educatieve Opmerking
Dit artikel is informatief en educatief. Browser ondersteuning en CSS syntax kunnen wijzigen. Controleer altijd de actuele MDN documentatie en caniuse.com voor de nieuwste compatibiliteitsgegevens. Elk project heeft unieke vereisten — deze gids is een startpunt, geen definitief antwoord.