Het wordt tijd dat we de Dark Mode toevoegen aan onze websites!

Zo ondertussen elk groot besturingssysteem, op zowel desktop als mobiel heeft er tegenwoordig ondersteuning voor: Een zogenaamde dark mode, of donkere weergave. Dit houdt kort in dat het grootste gedeelte van je scherm, wat normaal wit is, nu donker wordt. Beter voor je batterij én beter voor je ogen.

Veel apps, waaronder natuurlijk de standaard apps (denk aan je agenda, je mail, je instellingen), maar ook Instagram, Slack, Twitter en vele andere maken inmiddels gebruik van deze Dark Modus. Zodra jij je telefoon hebt ingesteld op een donkere weergave, houden deze apps hier rekening mee.

Dark Mode toevoegen op je website

Maar het houdt niet op bij enkel Apps. Ook websites kunnen hier rekening mee houden. Met de nieuwe CSS media query prefers-color-scheme kun je heel eenvoudig je website donker maken, enkel door wat CSS aan te passen. En met een ondersteuning van momenteel 74% van de browsers (bron: CanIUse) op zowel desktop als mobiel, heb je eigenlijk geen excuus meer om het niet te doen.

Hoe werkt Prefers-color-scheme?

Om deze Media Query is eenvoudig toe te voegen, op een zelfde manier hoe je ook responsive media queries gebruikt. In je (s)CSS zet je eenvoudig de volgende code om bijvoorbeeld heel je document donker te maken, en je tekst wit:

@media (prefers-color-scheme: dark) {
 body{
  background: rgba(255,255,255,0.8);
  color: rgba(255,255,255,0.8);
 }
}

Door deze eenvoudige query te gebruiken, maakt dit het heel eenvoudig om je website toegankelijker te maken voor iedereen die een donkere modus ingesteld heeft in zijn of haar besturingssysteem.

Maar mijn huisstijl!

Ja, je site gaat er flink anders uit zien als je je kleuren compleet omgooit. Maar dit betekent niet dat dit ten koste moet gaan van goed design! Je hoeft niet simpelweg alles wat nu licht is donker te maken, en andersom. Kijk eens met een kritisch oog naar je design. Kun je wellicht bepaalde tinten hergebruiken uit je huidige, lichte design? Misschien is je huidige design al vrij donker. Dan is een donkere modus misschien helemaal niet nodig.

Vond je dit interessant, en wil je meer weten? Neem dan gerust contact met mij op!

✉️ Neem contact op