# 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.

```css
: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.

---

## Bronnen

- [Android Authority - Dark Mode Usage Statistics 2024](https://www.androidauthority.com/dark-mode-usage-statistics/)
- [Google - Dark theme impact on battery](https://developer.android.com/develop/ui/views/theming/darktheme)
- [Material Design - Dark theme guidelines](https://m3.material.io/styles/color/dark-theme)
- [Nielsen Norman Group - Dark Mode vs. Light Mode](https://www.nngroup.com/articles/dark-mode/)

---

Bron: https://webdesign.bykick.nl/blog/dark-mode-waarom-je-website-er-een-nodig-heeft