Automatische dark mode kan je ontwerp zomaar veranderen: pak de regie terug

Stel: je hebt maanden gewerkt aan een sterke huisstijl. De kleuren kloppen, het logo zit goed, de website ademt het merk. En dan opent een deel van je publiek ’s avonds je site op hun telefoon, en zien ze iets wat jij nooit hebt ontworpen. Donkere achtergronden en kleuren die anders ogen, zoals oranje dat plots bruinig wordt. Niemand bij jouw organisatie heeft daarvoor gekozen.

En daar verschijnt het zwarte schaap in het verhaal: automatische dark mode, die een ontwerp zomaar kan veranderen. Samsung Internet Browser is daar een bekend voorbeeld van, maar het is geen probleem van die ene browser alleen.

Het verschil tussen dark mode en automatische dark mode

Eerst een belangrijk onderscheid, want die twee worden vaak door elkaar gehaald.

• Dark mode is een bewust ontworpen donkere variant van een website. De ontwerper bepaalt welke kleuren, contrasten en aanpassingen gelden in het donker. Het merk houdt de regie. Browsers ondersteunen deze ontworpen dark mode via CSS (Cascading Style Sheets), en dat is precies hoe het hoort te werken.
• Automatische dark mode is iets anders. Hier grijpt de browser zelf in en zet een lichte website om naar donker volgens een eigen algoritme. Het is geen vertaling die je merk respecteert, maar een omzetting volgens vaste regels.

Als een gebruiker zelf een donkere voorkeur instelt, geven de meeste browsers dat netjes door aan de website, die vervolgens de ontworpen donkere variant toont. Dat is de juiste route: de site bepaalt zelf hoe het donker wordt weergegeven. Het probleem ontstaat pas bij een geforceerde omzetting, waarbij de site zelf wordt omgezet ongeacht wat de ontwerper bedoelde. Soms doet de browser dat automatisch.

In andere gevallen kiest de gebruiker er zelf voor, via een instelling of een browserextensie, en dat kan bij meer browsers. In bepaalde situaties overschrijft zo’n omzetting zelfs een eigen dark mode, zoals bij Samsung Internet Browser, al verschilt dat per browser, versie en instellingen.

Hoe groot is dit probleem?

Dark mode zelf is allang geen niche meer. Een aanzienlijk deel van de mobiele gebruikers heeft een donkere voorkeur ingesteld, en metingen van Chrome lieten al eerder zien dat ongeveer een vijfde van het webverkeer afkomstig is van gebruikers met die instelling. Maar dat is de vraag naar dark mode, niet de omvang van het probleem. Want voor de meeste van die mensen werkt het prima: hun browser toont gewoon je lichte versie, of je eigen donkere variant als je die hebt.

Het gaat pas mis bij een geforceerde omzetting, en die groep is kleiner en lastiger te becijferen. Samsung Internet Browser is daarvan het bekendste voorbeeld, met wereldwijd minder dan twee procent van het browsergebruik en een groter aandeel binnen Android. Klein dus, maar het is niet de enige plek waar dit speelt, en het exacte aandeel hangt af van browsers, instellingen en hoeveel sites een eigen dark mode hebben. De werkelijke impact kan bovendien groter zijn dan de browsercijfers doen vermoeden, omdat niet duidelijk hoeveel mensen via extensies of systeemtools als Dark Reader zelf een automatische omzetting afdwingen.

De kern is daarom niet een percentage, maar een principe: zodra je geen eigen dark mode hebt, geef je de controle over hoe je merk in het donker oogt uit handen. En naarmate meer mensen kiezen voor een donkere weergave, wordt het steeds relevanter om te weten hoe je site zich in het donker gedraagt, ook als het vandaag nog om een minderheid van je bezoekers gaat.

Waar het zichtbaar wordt

Om concreet te maken wat zo’n omzetting met een merk doet, is Samsung Internet Browser een goed voorbeeld om naar te kijken. In een donkere omgeving past de browser een eigen automatische omzetting toe, afhankelijk van instellingen, toestel en browserversie. Het resultaat is wisselend, maar zelden echt goed. Kleuren verschuiven zonder rekening te houden met de huisstijl, subtiele grijstinten worden hard en afbeeldingen met een lichte achtergrond vallen weg in het donker.

Ook mijn eigen werk ontkwam er niet aan. Toen ik een eerdere versie van mijn site testte op een Samsung-toestel, schrok ik van wat ik zag. Mijn oranje merkkleur werd bruinig, decoratieve witte wolken in SVG kleurden niet mee met de achtergrond, en sommige vlakken en omlijningen bleven wel oranje terwijl de meeste verkleurden. Het geheel was allesbehalve samenhangend, een frustratie voor mij als ontwerper. De browser begrijpt de ontwerpkeuzes en huisstijlrichtlijnen nu eenmaal niet. Daar gaat het mis.

Het probleem is niet zwart-wit

Voor marketeers voelt dit al snel als iets voor de webbouwer, een technische kwestie. Maar het raakt net zo goed het merk.

Technisch, omdat browsers zich anders gedragen en je daarop moet testen. En vanuit merkperspectief, omdat consistentie in uitstraling belangrijk is. Een huisstijl staat onder druk zodra een browser zelf gaat bepalen hoe je merk in het donker oogt.

Veel mensen kiezen bewust voor een donkere weergave omdat het prettiger leest, rustiger is voor de ogen of zuiniger met de batterij. Die behoefte is terecht, en dat maakt het juist een afweging in plaats van een simpel probleem.

Want hier zit voor mij de kern. Heeft een site geen eigen dark mode, dan snap ik dat een gebruiker een donkere weergave wil afdwingen, want dat leest nu eenmaal prettiger. Maar is die eigen dark mode er wél, dan hoort een browser die te respecteren. Dat is wat mij betreft de basis voor een site die overal goed werkt. Gebeurt het niet, dan wordt het een doorn in het oog: je moet met omwegen en trucjes alsnog redden wat de browser overhoop haalt. Dat een gebruiker bewust kiest voor een geforceerde omzetting is een ander verhaal. Dat is een keuze die buiten je invloed ligt. Het wringt pas wanneer een browser of extensie die omzetting automatisch afdwingt, terwijl er al een eigen dark mode is ontworpen.

Wat je eraan kunt doen

De oplossing is niet om dark mode te vrezen, maar om zoveel mogelijk de regie terug te nemen. Dat begint bij dark mode niet als bijzaak te zien, maar mee te nemen in het ontwerp- en merkproces vanaf het begin.

Een eigen dark mode is daarbij de basis: een bewust ontworpen donkere variant van je site waarin kleur, contrast en uitstraling kloppen. Dat blijft belangrijk, maar het is niet genoeg op zichzelf, want een automatische omzetting kan die eigen variant in bepaalde gevallen alsnog beïnvloeden.

Daarom is testen minstens zo belangrijk. Controleer hoe je site zich gedraagt onder automatische dark mode, het best op een echt Samsung-toestel waarbij je de donkere weergave handmatig activeert. Zelf zet ik daarbij bewust de optie voor donkere sites aan, zodat ik het effect ook overdag kan zien zonder op de avond te wachten. In browsers zoals Chrome kun je via DevTools een donkere weergave simuleren, en het loont om de contrasten te controleren op leesbaarheid, ook voor mensen met een visuele beperking.

Leg de donkere variant ten slotte vast in het brandbook, naast de lichte versie, zodat het merk in beide weergaven consistent blijft.

Wat de techniek betreft volstaat het om te weten dat er een mouw aan te passen is. Afbeeldingen en vormen zoals bogen of schuine lijnen kun je beter transparant opbouwen, zodat ze netjes meekleuren met de achtergrond. En soms vraagt het om andere kleurkeuzes voor tekst en vlakken. Een tint die in het donker beter binnen je huisstijl blijft, of juist wit en lichtgrijs wanneer een merkkleur niet goed werkt op een donkere achtergrond. Zo kan een knop met een subtiel kleurverloop in light mode prima werken, maar in dark mode wegvallen. Dan kies je voor een aangepaste variant of een eenvoudiger vlak dat contrast behoudt.

Wie zet het licht uit?

Een merk dat controle wil houden over zijn uitstraling, maakt die keuzes liever zelf dan ze over te laten aan een browser of extensie. En er is ook een positieve kant: een goed ontworpen dark mode is niet alleen een kwestie van het voorkomen van problemen, maar ook een kans. Het is een tweede gezicht van je merk, een variant die rust geeft, prettig leest en je site een eigen karakter in het donker meegeeft.

Dark mode is daarmee onderdeel geworden van hoe een merk wordt ervaren, of je daar nu bewust voor hebt gekozen of niet. De vraag is niet of je site in het donker wordt getoond, maar wie bepaalt hoe die versie eruitziet.