Kleurenschema’s ontwerpen voor donkere interfaces
Leer hoe je contrastrijke en prettige kleurencombinaties maakt die in beide modi goed functioneren.
Lees artikelGebruikersvoorkeur detectie implementeren
Leer hoe je automatisch detecteert wat je gebruikers willen — donker of licht — en je website daarop aanpast zonder gedoe.
Waarom dit belangrijk is
Niet iedereen wil een witte website. Sommigen krijgen kopijn van fel licht, anderen vinden donker scherm gewoon prettiger om naar te kijken. Het goede nieuws? Je kan dit automatisch detecteren en je site zich laten aanpassen. Geen knopje nodig.
De meeste moderne browsers sturen je een signaal: “deze gebruiker prefereert donker”. Je hoeft daar alleen maar naar te luisteren. We’ll laten je zien hoe dat werkt — en ja, het is makkelijker dan je denkt.
De CSS media query methode
Dit is de makkelijkste manier. Je gebruikt gewoon `prefers-color-scheme` in CSS. Dat’s het. Geen JavaScript nodig, geen complexe logica.
De browser vraagt automatisch aan je besturingssysteem: “welke voorkeur heeft deze gebruiker?” En dan pas je je site aan. Echt waar, het werkt in 95% van de browsers nu.
Je maakt je normale (lichte) CSS, en dan voeg je een aparte blok toe voor donker. Beide versies bestaan tegelijk — de browser kiest welke hij gebruikt.
Stap voor stap: implementatie
01
Definieer je kleurschema’s
Maak eerst je normale (lichte) versie. Definieer kleuren met CSS variabelen. Dit wordt je standaard.
02
Voeg de media query toe
Gebruik `@media (prefers-color-scheme: dark)` om andere waarden in te stellen wanneer donker voorkeur wordt gedetecteerd.
03
Test op alle devices
Verander je systeeminstelling en kijk hoe je site reageert. Windows, Mac, iOS, Android — allemaal anders.
En wat als je JavaScript nodig hebt?
Soms wil je meer controle. Misschien wil je een knopje zodat gebruikers zelf kunnen kiezen. Of je wil bepaalde elementen dynamisch veranderen. Dan heb je JavaScript nodig.
Je kan de voorkeur controleren met `window.matchMedia(‘(prefers-color-scheme: dark)’).matches`. Dit geeft je `true` of `false`. Dan kan je je pagina aanpassen hoe je wilt.
Pro tip: Combineer beide! CSS doet het zware werk. JavaScript voegt alleen extra features toe wanneer nodig.
Zorg voor contrast en leesbaarheid
Contrast testen
Witte tekst op donker moet nog steeds goed leesbaar zijn. WCAG zegt minstens 4.5:1 contrast. Check dit met tools.
Beide modes testen
Test je site echt in beide modi. Niet alleen in code, maar op echte devices. Sommige kleuren zien er anders uit.
Geen grijze tekst
Veel developers maken grijze tekst in donker modus. Maar dat is lastig te lezen. Houd het schoon — licht of donker.
Kort samengevat
Je hebt nu alles wat je nodig hebt. Start met CSS media queries — dat’s de solide basis. Je site past zich automatisch aan aan wat de gebruiker prefereert. Geen knopjes, geen geknoei. Gewoon werken.
Wil je meer flexibiliteit? Voeg JavaScript toe. Wil je een thema-knopje? Dat kan ook. Maar de basis — detectie van de voorkeur — dat’s gewoon CSS. Makkelijk en betrouwbaar.
Definieer je CSS variabelen voor beide modi
Voeg `@media (prefers-color-scheme: dark)` toe
Test het contrast in beide modi
Zet live en monitor gebruikersfeedback
Informatie
Dit artikel is informatief bedoeld voor webontwikkelaars en ontwerpers. De technieken beschreven zijn gebaseerd op huidige webstandaarden (WCAG, CSS specifications). Implementatiedetails kunnen variëren afhankelijk van je specifieke project en requirements. Zorg ervoor dat je grondig test op alle browsers en devices die jij ondersteunt.
Gerelateerde artikelen
