Dark mode: waarom je website er een nodig heeft

82% van de smartphonegebruikers heeft dark mode aan

Dat cijfer van Android Authority uit 2024 zegt genoeg. Dark mode is geen nice-to-have meer - het is wat je bezoekers verwachten. En als je site er niet op voorbereid is, krijgen ze een felle witte flits midden in de avond. Dat is hoe je bezoekers verliest.

Waarom dark mode werkt

Minder oogvermoeidheid

Witte achtergronden met zwarte tekst op een helder scherm in een donkere kamer - dat is als een zaklamp in je gezicht. Dark mode verlaagt het contrast tot een comfortabel niveau. Vooral voor bezoekers die 's avonds je site bekijken (en dat is 60% van het mobiele verkeer na 18:00).

Beter voor de batterij

Op OLED-schermen - en dat zijn vrijwel alle moderne smartphones - verbruiken donkere pixels minder stroom. Google bevestigde dat dark mode op YouTube tot 60% batterij bespaart bij maximale helderheid. Je bezoekers kunnen langer browsen zonder oplader.

Het ziet er premium uit

Er is een reden waarom merken als Apple, Spotify en Netflix standaard donker zijn. Donkere interfaces stralen luxe uit. Kleuren poppen meer, afbeeldingen komen beter tot hun recht, en de focus gaat naar je content in plaats van naar de achtergrond.

De valkuilen

Niet gewoon kleuren omdraaien

De grootste fout: wit wordt zwart, zwart wordt wit, klaar. Dat levert onleesbare tekst op, te harde contrasten, en een interface die er uitziet als een negatief van een foto.

Goed dark mode design betekent:

Donkergrijs als achtergrond (niet puur zwart) - #1a1a1a of #121212 werkt beter dan #000000
Gedempt wit voor tekst - #e0e0e0 in plaats van #ffffff voorkomt flikkerend contrast
Verlaagde verzadiging van kleuren - felle kleuren op donkere achtergrond zijn vermoeiend
Subtiele borders en schaduwen - in dark mode werken lichte borders beter dan schaduwen

Afbeeldingen en logo's

Transparante PNG's met donkere elementen verdwijnen in dark mode. En die mooie screenshot met witte achtergrond wordt een lichtgevend blok.

Oplossingen:

Gebruik SVG-logo's die hun kleur aanpassen via CSS
Voeg een subtiele border of achtergrond toe aan afbeeldingen
Maak twee versies van je logo (licht en donker)

Formulieren en inputs

Formuliervelden zijn berucht in dark mode. De browser-defaults (witte input velden) botsen met je donkere design. Stijl ze expliciet mee.

Hoe je het technisch aanpakt

CSS custom properties

De schoonste aanpak: definieer je kleuren als CSS variabelen en wissel ze per thema.

:root {
  --background: #ffffff;
  --foreground: #1a1a1a;
}

.dark {
  --background: #0a0a0a;
  --foreground: #e0e0e0;
}

Respecteer de voorkeur van de gebruiker

prefers-color-scheme detecteert de systeeminstelling van de bezoeker. Gebruik het als default, maar geef altijd een toggle-knop. Niet iedereen wil dat je hun systeemvoorkeur overneemt.

Bewaar de keuze

Sla de voorkeur op in localStorage. Niemand wil bij elk bezoek opnieuw dark mode aanzetten.

Glassmorphism in dark mode

Een trend die bijzonder goed werkt in dark mode: glassmorphism. Halfvertige, geblurde panelen die diepte creeren zonder zware schaduwen. De combinatie van backdrop-filter: blur() met subtiele borders en lage opacity achtergronden geeft een moderne, premium uitstraling.

Bij Web Design by Kick is dit onze standaard - elke site die we bouwen heeft een doordacht dark mode design met glass-card elementen die in beide thema's werken.

Conclusie

Dark mode is een standaard geworden, geen feature. Begin met CSS custom properties, test grondig in beide thema's, en respecteer de voorkeur van je bezoeker. Het kost een paar uur extra development, maar het verschil in gebruikerservaring is enorm.