Website sieht in Safari dunkel aus, obwohl sie hell gestaltet ist: Adaptive Dark Mode verstehen

Wenn Ihre Website seit ein paar Tagen auf dem iPhone oder Mac in Safari plötzlich dunkel wirkt, Ihr weißes Logo auf einmal schwarz ist und Sie nichts daran geändert haben, liegt das nicht an Ihrer Website. Apple hat mit der Beta von Safari 27.3 eine neue Funktion namens Adaptive Dark Mode eingeführt, die hell gestaltete Seiten automatisch in eine dunkle Ansicht umrechnet, wenn der Besucher auf seinem Gerät den Dunkelmodus eingeschaltet hat. Solche Browser-Eigenheiten gehören für mich im Webdesign inzwischen zum Alltag.

Das Problem: plötzlich andere Farben, ohne eigenes Zutun

Die Meldung, die ich dazu zuerst bekomme, klingt meist so: „Unsere Startseite sieht auf dem iPhone meines Kollegen komplett anders aus als bei mir — der Hintergrund ist schwarz, das Logo wirkt invertiert, und ein Verlauf im Header zeigt merkwürdige Ränder.“ Auf dem eigenen Rechner im hellen Systemmodus ist alles unverändert, deshalb wirkt der Fehler zunächst wie ein Einzelfall oder ein kaputtes Caching. Tatsächlich betrifft es jeden Besucher, der Safari 27.3 nutzt und seinen Dunkelmodus aktiviert hat — unabhängig vom Gerät.

Woran es liegt: Safari färbt helle Seiten selbst um

Laut dem offiziellen WebKit-Blog vom 3. November 2026 prüft Adaptive Dark Mode jede Seite auf helle Hintergründe und wendet dann eine eigens entwickelte Farbmatrix an, die die Leuchtkraft von Farben umkehrt, aber den Farbton erhält — mit dem Ziel, WCAG-Kontraste von mindestens 4,5:1 zu erreichen. Einfache, flächige Schwarz-Weiß-Logos werden dabei mit umgedreht. Komplexere Bitmap-Bilder und Inhalte in Canvas-Elementen lässt Safari dagegen unangetastet, ebenso Masken und der CSS-Effekt mix-blend-mode können laut WebKit zu Darstellungsfehlern führen, weil die Farbumkehr dort nicht greift wie erwartet. Der entscheidende Punkt: Diese Umfärbung passiert nur bei Websites, die dem Browser nicht mitgeteilt haben, ob sie überhaupt einen Dunkelmodus unterstützen. Wer das mit der CSS-Eigenschaft color-scheme oder dem gleichnamigen Meta-Tag bereits erklärt hat, bleibt unverändert — Adaptive Dark Mode greift dort laut WebKit nicht ein.

Die Lösung: color-scheme gezielt setzen

Für die meisten Websites, die bewusst nur in einem hellen Design gestaltet sind, reicht eine einzige Zeile:

• Im <head> das Meta-Tag <meta name="color-scheme" content="light"> ergänzen oder in der CSS-Datei :root { color-scheme: light; } setzen — damit bleibt die Seite für alle Besucher wie gestaltet, Safari verzichtet auf die automatische Umfärbung.
• Wer bereits einen eigenen, selbst gestalteten Dunkelmodus über @media (prefers-color-scheme: dark) anbietet, sollte stattdessen color-scheme: light dark; setzen — dann weiß Safari, dass die Seite beide Varianten sauber abdeckt, und lässt die eigene Umsetzung in Ruhe.
• Ohne Zugriff auf den Quelltext lässt sich das Tag bei WordPress meist über ein Code-Snippet-Plugin oder die „Zusätzlicher CSS“-Funktion im Theme nachtragen; bei Divi und Elementor über die jeweiligen Theme-Einstellungen für den Seitenkopf.

Wer unsicher ist, ob die eigene Website betroffen ist, findet weitere Hintergründe zu CSS und Browserdarstellung in meinem Webdesign-Wissen, oder spricht mich direkt über die Kontaktseite an.

Wichtig dabei: color-scheme ist keine neue Erfindung, sondern seit Jahren Teil von CSS und wird von allen gängigen Browsern verstanden. Websites, die diese Eigenschaft schon zur Unterstützung von Formularfeldern und Scrollbalken im Systemmodus gesetzt haben, sind bereits abgesichert.

Nach dem Setzen öffne ich die Seite in Safari 27.3 mit aktiviertem Systemdunkelmodus und vergleiche sie gegen die normale, helle Ansicht. Besonders genau schaue ich mir Logos mit feinen Farbverläufen, eingebettete SVG-Icons und Buttons mit transparentem Hintergrund an — genau dort fiel mir die automatische Umfärbung bisher am ehesten auf. Wer zusätzlich einen echten, selbst gestalteten Dunkelmodus plant, sollte die Kontraste dafür von Hand prüfen und sich nicht auf die automatische Anpassung des Browsers verlassen.

Quellen

WebKit-Blog: Introducing Adaptive Dark Mode (3. November 2026, Safari 27.3 Beta)

Kurz beantwortet

Betrifft Adaptive Dark Mode auch Chrome und Firefox?

Nein, laut WebKit ist es eine Safari-Funktion. Chrome und Firefox färben helle Websites nicht automatisch um, Besucher dort sehen weiterhin das ursprüngliche helle Design.

Verliere ich Besucher, wenn ich color-scheme nicht setze?

Besucher sehen die Seite weiterhin, nur eben automatisch umgefärbt — bei durchdachten, einfachen Layouts fällt das kaum auf. Bei Logos mit feinen Verläufen, Icon-Grafiken oder Bildern mit transparentem Hintergrund kann die Umfärbung aber unschön wirken.

Reicht ein einzelnes Meta-Tag für die ganze Website?

Ja, wenn die Seite durchgängig hell gestaltet ist. Bei mehreren Vorlagen oder einem Theme-übergreifenden Aufbau lohnt sich trotzdem ein kurzer Blick in Safari 27.3, ob jede Unterseite wie gewünscht aussieht.