Apple hat in die erste Beta von Safari 27.3 eine Funktion eingebaut, die helle Websites dunkel darstellt. Adaptive Dark Mode greift nur, sobald jemand die Systemdarstellung auf dunkel gestellt und die Umfärbung selbst eingeschaltet hat. Im WebKit-Blog erklärt das Entwicklerteam auch, wie du deine Seite davon ausnimmst.
Den Anlass beziffert Apple so: Fast 40 Prozent der Seitenaufrufe kommen von Menschen im Dunkelmodus, nur 10 Prozent der aufgerufenen Seiten unterstützen ihn.
Wie färbt Safari eine helle Seite um?
Safari prüft zuerst die Farben einer Seite. Überwiegend dunkle Seiten bleiben unverändert, ebenso jede Seite, die per color-scheme ein eigenes dunkles Design angibt. Helle Seiten rechnet der Browser um: Die Helligkeit kehrt sich um, der Farbton bleibt. Text soll dabei ein Kontrastverhältnis von 4,5 zu 1 erreichen, den Wert aus den Barrierefreiheitsrichtlinien WCAG. Helle CSS-Verläufe werden dunkel.
Was macht Safari mit deiner Seite?
Adaptive Dark Mode in der Beta von Safari 27.3, nur bei dunkler Systemdarstellung und eingeschalteter Funktion
Wie sieht deine Seite aus?
- Eigenes dunkles Design mit color-scheme: light darkSafari ändert nichts
- Design ist schon überwiegend dunkelSafari ändert nichts
- Hell, ohne Angabe zu color-schemeSafari färbt die Seite dunkel
- Hell, mit color-scheme: light onlySeite bleibt hell, sobald Safari only versteht
Das Schlüsselwort only versteht die erste Beta noch nicht
Quelle: WebKit Blog
Bilder lässt Safari meist, wie sie sind. SVG-Grafiken passt der Browser bei Bedarf an, einfache Logos in Schwarz-Weiß als Pixelbild kehrt er um. Inhalte eines canvas-Elements bleiben unberührt. Masken und mix-blend-mode schaltet Safari an umgefärbten Elementen teilweise ab, weil die Effekte dort unschöne Ergebnisse liefern können.
Erkennen kann deine Website die Umfärbung nicht. Skripte, die CSS-Farben abfragen, bekommen die ursprünglich gesetzten Werte zurück.
Ab wann und für wen gilt die Umfärbung?
Bisher steckt Adaptive Dark Mode nur in der Beta von Safari 27.3. Laut MacRumors sollen iOS 27.3, iPadOS 27.3 und macOS Golden Gate 27.3 im Dezember erscheinen. Auf welchen Geräten die Umfärbung kommt, nennt Apple im WebKit-Blog nicht.
Einschalten müssen die Nutzer die Funktion selbst. Steht die Systemdarstellung auf dunkel, bietet Safari auf einer hellen Seite eine Vorschau an, in der Beta über die Schaltfläche „Try“. MacRumors zufolge lässt sich die Umfärbung nach dem ersten Versuch für alle Websites oder einzeln je Website aktivieren. Eine deutsche Bezeichnung nennt Apple noch nicht.
Wie nimmst du deine Seite aus?
Unterstützt deine Seite schon ein dunkles Design, gibst du das im Kopf der Seite mit <meta name="color-scheme" content="light dark"> oder in CSS mit color-scheme: light dark an. Safari lässt solche Seiten in Ruhe. Soll deine Seite immer hell bleiben, schreibst du stattdessen light only. In CSS funktioniert die Angabe auch für einzelne Bereiche, etwa für ein Raster mit Produktfotos.
Einen Haken hat die erste Beta: Das Schlüsselwort only versteht Safari 27.3 Beta 1 noch nicht. Ab wann die Angabe light only greift, sagt Apple bislang nicht. Google hat für Chrome unter Android eine ähnliche automatische Umfärbung getestet und schreibt dieselbe Angabe als only light. Nach der CSS-Spezifikation des W3C ist die Reihenfolge der beiden Wörter beliebig.
Was das für dich bedeutet
Hat deine Seite kein eigenes dunkles Design, sehen Safari-Nutzer mit eingeschalteter Funktion bald eine andere Fassung als die von dir gestaltete. Prüf am besten in der Beta oder gleich nach dem Update, wie Logos, Produktfotos auf weißem Grund und Diagramme auf dunklem Grund wirken. Wie du eine Seite in Safari untersuchst, zeigt die Lektion zu den Safari-DevTools.
Ein eigenes dunkles Design mit prefers-color-scheme oder der CSS-Funktion light-dark() gibt dir die volle Kontrolle über die Farben. Für Bilder nennt Apple dafür das picture-Element mit einer eigenen dunklen Bildquelle. Muss ein Markendesign hell bleiben, setzt du color-scheme: light only und prüfst in den nächsten Betas, ob Safari die Angabe beachtet.
Unabhängig vom Weg empfiehlt Apple, Logos und Symbole als SVG statt als Pixelbild anzulegen. Farbflächen und Verläufe legst du am besten per CSS an, nicht als gekachelte Hintergrundbilder. Auch Bilder mit transparentem Hintergrund passen sich besser an.
Das WebKit-Team hat Adaptive Dark Mode am 3. November 2026 vorgestellt.
Quellen
