• november 9, 2026
• Brian

Safari gaat lichte websites zelf donker maken. In de bèta van Safari 27.3 zit een nieuwe functie, Adaptive Dark Mode, die een site met een witte achtergrond automatisch omzet naar een donkere versie als de bezoeker dat wil. Handig voor wie ’s avonds leest, maar voor merken betekent het ook iets: je huisstijlkleuren en je logo kunnen er straks anders uitzien dan je ze ooit hebt goedgekeurd. Tijd om even te kijken wat er verandert en wat je eraan kunt doen.

Wat Apple precies aankondigt

Op 3 november 2026 presenteerde het WebKit-team (de makers van de browser-engine achter Safari) Adaptive Dark Mode. Volgens Apple komt bijna 40 procent van de paginaweergaven van mensen die hun apparaat in dark mode hebben staan, terwijl maar ongeveer 10 procent van de pagina’s daar zelf op is ingericht. Dat gat wil Safari dichten.

Het werkt zo: staat het systeem op donker en kom je op een lichte site, dan biedt Safari een voorbeeld aan van de donkere versie. Kies je daarvoor, dan analyseert de browser de pagina en draait hij de helderheid van kleuren om, terwijl de tint behouden blijft. Lichte achtergronden worden donker, donkere tekst wordt licht, en voor tekst mikt Safari op een contrast van minimaal 4,5:1, de norm uit de toegankelijkheidsrichtlijnen (WCAG).

Sites die zelf al aangeven dat ze een donkere variant hebben, laat Safari met rust. Dat doe je met color-scheme: light dark in de CSS of met de bijbehorende meta-tag in de head van je HTML.

Wat er met je logo en beeld gebeurt

Voor een imagobureau is dit het interessante stuk. Foto’s blijven volgens Apple meestal ongemoeid. Maar logo’s en iconen kunnen hun contrast verliezen als de achtergrond ineens donker is. Daarom kijkt Safari in SVG-bestanden en past daar zo nodig de kleuren aan. Bij gewone bitmap-afbeeldingen (zoals PNG of JPG) analyseert de browser de pixels en draait hij eenvoudige zwart-witlogo’s om.

Dat klinkt slim, en dat is het ook. Alleen beslist de browser dan over jouw merkuiting, niet jij. Een donkerblauwe huiskleur kan na het omdraaien van de helderheid een stuk lichter uitvallen dan je huisstijlhandboek voorschrijft. Effecten als maskers en mix-blend-mode zet Safari in sommige gevallen uit, omdat ze na de kleurtransformatie rare resultaten geven. En een logo dat als plaatje met witte achtergrond is opgeslagen, kan als een fel wit blok in een donkere pagina komen te staan.

Belangrijk detail: een website kan niet zien dat Adaptive Dark Mode actief is. Apple houdt dat bewust verborgen, om te voorkomen dat het een extra kenmerk wordt waarmee trackers bezoekers kunnen herkennen. Je kunt er dus ook niet met een script omheen werken.

Drie routes voor je website

Je hebt grofweg drie keuzes.

1. Safari laten doen. Een moderne, net gebouwde site komt er volgens Apple meestal goed uit. Dan hoef je niets te doen, maar je hebt ook geen controle over hoe je merk er in het donker uitziet.
2. Zelf een donkere versie maken. Met prefers-color-scheme, de CSS-functie light-dark() en kleuren in CSS-variabelen bepaal je zelf welke tinten er in dark mode gebruikt worden. Dat is de route met de meeste regie, en de techniek is inmiddels in alle grote browsers beschikbaar.
3. Alleen licht toestaan. Met color-scheme: light only geef je aan dat (een deel van) je pagina alleen licht getoond moet worden. Let op: in de eerste bèta van Safari 27.3 werkt het woord only nog niet. Apple meldt dat dit in de loop van de bètaperiode verandert.

Praktische tips, ook als je nog niet wilt kiezen

Apple geeft zelf een paar aanwijzingen die eigenlijk gewoon goed vakmanschap zijn. Ze helpen in elke situatie:

• Gebruik voor logo’s en iconen SVG in plaats van PNG of JPG.
• Sla beelden op met een transparante achtergrond, in plaats van het wit van de pagina in de afbeelding mee te bakken.
• Gebruik kleuren en verlopen in CSS in plaats van achtergrondafbeeldingen die herhaald worden.
• Vervang oude image sprites door CSS voor afgeronde hoeken, schaduwen en knopstatussen.
• Geef blokken genoeg binnenruimte (padding), zodat elementen niet tegen elkaar aan kruipen als kleuren veranderen.

En misschien wel de belangrijkste: leg in je huisstijl vast hoe je logo en kleuren op een donkere achtergrond horen te staan. Veel huisstijlhandboeken hebben al een negatieve logoversie voor drukwerk. Die keuze verdient nu ook een plek op het web.

Wat wij ervan vinden

Het is goed nieuws voor lezers die liever geen fel wit scherm in hun gezicht krijgen, en het past in een bredere beweging waarin websites zich steeds meer aanpassen aan de voorkeuren van de bezoeker. Voor merken is het vooral een reminder dat je huisstijl niet alleen op wit moet werken. Wil je weten hoe jouw site of logo zich in dark mode gedraagt, test het dan in de bèta van Safari of vraag het ons gerust. Een donkere versie die bij je merk past, is vaak minder werk dan je denkt.

Bron: WebKit, Introducing Adaptive Dark Mode (3 november 2026).