Apple hat am 3. November 2026 in einem Beitrag im WebKit-Blog den Adaptive Dark Mode für Safari 27.3 Beta vorgestellt. Die Funktion malt Seiten ohne passendes dunkles Theme automatisch dunkel um, ohne dass die Website davon erfährt. Sie reiht sich in einen breiteren Trend der Browser ein, die Darstellung clientseitig zu steuern, statt sie vollständig den Websites zu überlassen.
Eine Abdunklung, die nicht auf die Zustimmung der Website wartet
Ist das Gerät auf Dark Mode eingestellt und lädt eine Seite mit hellem Hintergrund, bietet Safari dem Nutzer über eine Schaltfläche „Testen“ an, die Transformation zu aktivieren. Seiten, die bereits Dark-Mode-Unterstützung deklarieren, bleiben unangetastet, ebenso überwiegend dunkle Seiten mit hellem Text. Das unterscheidet sich von älteren erzwungenen Dark-Mode-Ansätzen auf Android, bei denen der Browser Stylesheets umschrieb, ohne fein zwischen bereits angepassten und anderen Seiten zu unterscheiden.
Die Mechanik der Farbtransformation
Technisch kehrt Safari die Helligkeit um und behält dabei den Farbton bei, wodurch helle Hintergründe dunkler und dunkler Text heller werden. Der Textkontrast zielt auf das WCAG-Verhältnis von 4.5:1. Helle CSS-Verläufe werden nach derselben Logik umgewandelt. Die meisten Bilder bleiben unverändert: SVG-Farben werden angepasst, damit Icons und Logos lesbar bleiben, und Safari analysiert das Pixelhistogramm von Bitmap-Bildern, um einfache Schwarz-Weiß-Logos umzukehren. Bei Elementen mit Masken oder mix-blend-mode können diese Effekte deaktiviert werden, und <canvas>-Inhalte werden nie verändert.
color-scheme: die Deklaration, die alles ändert
Safari lässt Seiten unangetastet, die ihre Unterstützung für beide Themes korrekt deklarieren. Das geschieht über ein Meta-Tag oder eine CSS-Eigenschaft:
<meta name="color-scheme" content="light dark">
<style>
:root {
color-scheme: light dark;
}
</style>Darauf aufbauend lässt sich die Darstellung mit der Media Query prefers-color-scheme, mit light-dark(), color-mix() oder contrast-color() verfeinern. Die bereits laufende Arbeit an Design Tokens für helle und dunkle Themes, dokumentiert in diesem Leitfaden zu CSS-Design-Tokens für ein wartbares helles/dunkles Theme, deckt diese Mechanismen bereits weitgehend ab.
Was das für die Front-End-Praxis bedeutet
Der klarste Punkt für Front-End-Teams: Eine Website, die nichts deklariert, verliert die Kontrolle über ihre Darstellung, sobald die Funktion aktiviert wird. Umgekehrt profitiert eine Website, die Bitmap-Icons zu SVG modernisiert, Sprites durch CSS ersetzt und transparente Hintergründe bei Inhaltsbildern einsetzt, von einer saubereren Transformation. Diese Empfehlungen decken sich mit jenen, die bereits für scrollgesteuerte CSS-Animationen formuliert wurden, wo schlankes Markup ebenfalls in unterschiedlichen Darstellungskontexten hilft.
| Deklaration | Verhalten von Safari 27.3 | Empfohlene Maßnahme |
|---|---|---|
| Keine color-scheme-Deklaration | Seite für automatische Transformation geeignet | Meta-Tag oder CSS-Regel color-scheme ergänzen |
| color-scheme: light dark | Seite bleibt unverändert, Safari geht von bereits verwaltetem Theme aus | Prüfen, ob das tatsächliche dunkle Theme vollständig ist |
| color-scheme: light only | Transformation deaktiviert (Schlüsselwort in Beta 1 nicht unterstützt) | Vor dem Verlassen auf eine aktuelle Safari-27.3-Beta testen |
| Dunkle Seite mit hellem Text | Automatisch von der Transformation ausgeschlossen | Keine Maßnahme nötig |
Skripte, die CSS-Farben auslesen oder auf ein Canvas zeichnen, erhalten weiterhin die ursprünglich deklarierten Werte: Die Transformation bleibt für den Code der Website unsichtbar.
light only der Eigenschaft color-scheme, das eine Seite oder ein Element von der Transformation ausnehmen soll, wurde in Safari 27.3 Beta 1 nicht unterstützt. Teams, die sich darauf verlassen wollen, sollten es an einer aktuellen Beta testen, bevor sie den Opt-out als verlässlich betrachten.Was zu beachten bleibt
Safari 27.3 Beta macht eine automatische Dunkel-Umfärbung zum Standard, die bislang Drittanbieter-Erweiterungen vorbehalten war, mit einer Farbtransformation, die feiner arbeitet als ein einfacher Invertierungsfilter. Websites, die ihre Dark-Mode-Unterstützung explizit deklarieren, behalten die Kontrolle; die übrigen werden nach Safaris eigenen Regeln umgefärbt, ob geplant oder nicht.
Dieser Schritt passt zu Apples langjähriger Haltung zum Datenschutz: Anders als bei Ansätzen, die Drittskripten erlaubten, den erzwungenen Dark Mode zu erkennen und auszunutzen, gibt es hier keine API, über die eine Website erfährt, dass die Transformation aktiv ist. Die eigentliche Frage für Agenturen und Freelancer bleibt: Wie viele Produktivseiten haben noch immer keine explizite color-scheme-Regel, obwohl die Änderung nur zwei Zeilen CSS kostet? — Simon Janvier
Zum Weiterlesen: der offizielle WebKit-Blogbeitrag zum Adaptive Dark Mode.
