Hoe werkt dark mode technisch?
Het besturingssysteem weet welke voorkeur je hebt ingesteld. De browser geeft die door aan de pagina.
In je opmaak vang je dat op met een regel die zegt: als de bezoeker donker wil, gebruik dan deze kleuren.
Meer is het niet. De uitvoering is wel meer werk dan die ene regel.
De opzet die werkt
Zet al je kleuren in variabelen: achtergrond, tekst, randen, accent. Gebruik daarna alleen die variabelen, nergens meer een losse kleur.
In je donkere blok herdefinieer je alleen de variabelen. Je hoeft dan niet elke regel te verdubbelen.
Waarom variabelen
Omdat je anders honderd regels twee keer moet schrijven, en bij elke wijziging twee plekken moet bijwerken.
Met variabelen is het één blok van tien regels. Meer daarover lees je bij css.
Wat je apart moet regelen
Je logo, als dat donker is. Afbeeldingen met een witte achtergrond. Schaduwen, die op donker niet werken. En je formuliervelden.
Dat laatste is de meest onderschatte: browsers geven die soms ongevraagd een donkere weergave.
Mijn vuistregels
- Werk met kleurvariabelen, altijd.
- Definieer je lichte kleuren als basis en overschrijf alleen wat verandert.
- Geef je pagina expliciet een achtergrondkleur; laat hem niet doorschijnen.
- Test je logo en je afbeeldingen apart.
Die derde voorkomt de meest voorkomende fout: donkere tekst op een donkere achtergrond.
Een eigen schakelaar
Wil je bezoekers zelf laten kiezen, dan zet je hun keuze in de browser op en zet je een kenmerk op je pagina.
Je opmaak reageert dan zowel op de systeemvoorkeur als op dat kenmerk. Meer daarover lees je bij browser.
Hoe je het test
Zet dark mode aan in je systeeminstellingen, of gebruik de ontwikkelaarshulpmiddelen van je browser om de voorkeur na te bootsen.
Meer daarover lees je bij of dark mode in elke browser werkt.