Safari verdunkelt Websites, die nie danach gefragt haben, und Ihre Seite kann es nicht erkennen

Jemand sagt Ihnen, dass die Farben auf Ihrer Website falsch aussehen. Verwaschen oder invertiert, oder das Diagramm in der Mitte der Seite ist ein helles weißes Rechteck in einem ansonsten dunklen Layout. Sie öffnen die gleiche Seite auf dem gleichen Telefonmodell und alles sieht genau so aus, wie Sie es gestaltet haben.

Sie irren sich nicht und Sie auch nicht. Seit dem 3. November 2026 gibt es eine dritte Partei in diesem Gespräch, und das Wichtigste, das man über sie wissen sollte, ist nicht, dass sie Ihre Farben ändert. Es ist, dass Ihre Seite absichtlich daran gehindert wird, das herauszufinden.

Was Adaptive Dark Mode ist

Adaptive Dark Mode kam mit der Safari 27.3 Beta. WebKits eigene Beschreibung ist ein Satz: “Wenn von einem Benutzer aktiviert, passt Safari helle Websites an und präsentiert sie als dunkel.”

Der Grund, den sie angeben, ist eine Lücke zwischen zwei Zahlen, und es lohnt sich, sie zu zitieren, weil sie erklären, warum dies immer hätte geschehen müssen: “Fast 40% der Web-Seitenaufrufe stammen von Benutzern im Dunkelmodus, und doch unterstützen nur 10% der Seitenaufrufe ihn.”

Dies ist opt-in, vom Benutzer und nicht von Ihnen. Jemand, der mit dunklem Systemerscheinungsbild auf einer hellen Seite landet, bekommt eine Vorschau von Safari zu sehen und tippt auf “Try”. Von da an werden helle Seiten für sie dunkel angezeigt. Es gibt kein Banner auf der Seite und nichts in Ihren Analytics, das sagt, dass es passiert ist.

Wie es entscheidet, ob es Ihre Seite anfassen soll

Es gibt zwei Pfade und nur einer von ihnen betrifft Sie.

Wenn Ihre Seite Unterstützung für Dunkelmodus erklärt, passiert nichts. Eine Seite mit <meta name="color-scheme" content="light dark"> im HTML oder color-scheme: light dark im CSS wird genau so gelassen, wie sie geschrieben wurde. Sie haben Safari mitgeteilt, dass Sie Dunkelheit selbst handhaben, und es glaubt Ihnen.

Für alles andere schaut es hin. Es analysiert die Seite, schätzt ab, ob sie überwiegend hell oder dunkel aussieht, und lässt dunkelähnliche Seiten unverändert. Eine Seite mit hellem Erscheinungsbild wird transformiert.

Die Transformation selbst ist eine Farbmatrix, die die Helligkeit invertiert und dabei den Farbton bewahrt, sodass ein weißer Hintergrund dunkel wird und dunkler Text hell wird, ohne dass alles sich in ein fotografisches Negativ verwandelt. Bei Text versucht sie, das WCAG 4.5:1 Kontrastverhältnis zu erreichen.

Der Teil, der Bugs erzeugt, ist das, was er nicht transformiert

Eine blanke Inversion wäre leicht zu verstehen. Das ist keine, und die Ausnahmen sind es, von denen die Berichte stammen.

• Helle CSS-Verläufe werden transformiert, sodass ein Verlauf, den Sie sorgfältig abgestimmt haben, neu berechnet wird.
• SVG-Bilder werden inspiziert und ihre Farben werden bei Bedarf transformiert. Bitmap-Bilder werden größtenteils unverändert gelassen, aber ihre Pixel-Histogramme werden analysiert und einfache Schwarz-Weiß-Logos werden invertiert.
• Masken und mix-blend-mode können ausgeschaltet werden. WebKits Überlegung ist, dass diese Effekte unerwünschte Ergebnisse bei einem Element erzeugen, dessen Farben transformiert wurden, sodass Adaptive Dark Mode sie in einigen Fällen deaktiviert, anstatt sie zu transformieren.
• <canvas> wird vollständig unverändert gelassen, da Canvas-Inhalte in ihren Worten “schwer vorherzusagen” sind.

Lesen Sie die letzten zwei zusammen und Sie haben einen Fehler, den niemand geschrieben hat. Ein Diagramm, das auf ein Canvas gerendert wird, behält seinen weißen Hintergrund, während jedes Pixel um ihn herum dunkel wird. Ein composited Overlay hört auf zu compositen. Beide sind für Sie unsichtbar und offensichtlich für die Person, die auf den Bildschirm schaut.

Ihre Seite darf es nicht wissen

Dies ist der Teil, der wichtig ist, wenn Sie versuchen möchten herauszufinden, was jemand sieht, und es ist eine absichtliche Designentscheidung und keine Lücke.

Apples Position ist, dass eine nachweisbare Einstellung eine Fingerprinting-Oberfläche ist, daher:

Safari hindert Websites daran zu erkennen, wann Adaptive Dark Mode angewendet wurde. JavaScript, das CSS-Farben abfragt, erhält die ursprünglich erstellten Farben, nicht die transformierten.

Das ist absolut, und der offensichtliche Workaround ist im gleichen Absatz geschlossen: “Alle Bilder, die in Canvas gerendert werden, werden in ihrer ursprünglichen Form angezeigt.” Das Screenshotting Ihrer eigenen Seite in ein Canvas gibt Ihnen die Version zurück, die Sie geschrieben haben, nicht die Version, die angezeigt wird.

So gibt getComputedStyle Ihnen Ihre eigenen Werte zurück. Ein diagnostischer Endpunkt, der berechnete Farben meldet, meldet Ihr Stylesheet. Eine “Fügen Sie Ihre berechneten Stile ein”-Anfrage an den Reporter gibt dasselbe zurück. Jedes Instrument, das Sie besitzen, ist auf der falschen Seite der Transformation, was eine vertraute Form ist: die Seite kann sich nicht sehen, und der einzige Zeuge ist ein menschliches Auge auf den Bildschirm.

Abmelden und der Haken ab heute

Zwei Deklarationen mit gegensätzlichen Auswirkungen.

color-scheme: light dark sagt, dass Sie Dunkelmodus unterstützen und werden ihn handhaben. Adaptive Dark Mode lässt Sie dann in Ruhe. Dies ist die beste Wahl, wenn Sie eine echte dunkle Designvariante haben oder vorhaben zu bauen, und WebKits Rat ist, sie im HTML-Head zu deklarieren, anstatt sie später mit JavaScript einzufügen, damit die Seite so früh wie möglich korrekt gerendert wird.

color-scheme: light only, oder <meta name="color-scheme" content="light only">, sagt, dass die Seite nur im Hellmodus angezeigt werden sollte, und weigert die Transformation vollständig.

Der Haken ist es wert zu wissen, bevor Sie es als Fix ausliefern: WebKit merkt an, dass das only-Keyword “nicht in Safari 27.3 beta 1 unterstützt wird”. Es ist eine Beta, das Feature ist explizit als sich durch diese Beta entwickelnd beschrieben, und die dokumentierte Fluchtluke funktioniert noch nicht im ersten Build davon.

Was man der Person, die es meldet, fragen sollte

Die gewöhnliche Frage “welcher Browser und welche Version” wird Sie nicht dorthin bringen. Jemand, der vor mehreren Wochen auf “Try” tippte, denkt nicht daran, dass es eine Einstellung ist, die er geändert hat, nicht mehr als er seine Bildschirmhelligkeit melden würde.

Zwei Fragen funktionieren. Sieht es in einem privaten Fenster falsch aus? und sieht es auf einem anderen Gerät falsch aus? Beide ändern die Antwort, wenn Adaptive Dark Mode beteiligt ist, und keine erfordert, dass der Reporter weiß, was es ist.

Noch besser ist ein Bild. Die Lücke zwischen dem, was Ihr Code beschreibt, und dem, was ein Bildschirm zeigt, ist genau die Lücke, die ein Screenshot schließt, und in diesem Fall ist es das Einzige, das dies kann, weil die Seite selbst auf die falsche Seite der Frage gestellt wurde.

Dies ist das zweite Mal in einem Jahr, dass eine Safari-Version ändert, was ein Fehlerbericht bedeutet, anstatt was eine Seite tun kann, nach den Änderungen in Safari 27.

Welche Erkenntnisse man daraus ziehen sollte

Ein Browser bearbeitet nun Ihre Farben im Namen des Benutzers, entscheidet Fall für Fall, welche Elemente bearbeitet werden, schaltet einige Ihrer Effekte aus, um es zu tun, und versteckt die ganze Operation vor Ihrem Code aus gutem Grund.

Wenn Sie ein dunkles Design haben, deklarieren Sie es und dies gilt nicht für Sie. Wenn nicht, ist die realistische Wahl, es passieren zu lassen und zu überprüfen, dass Ihre Canvas und Blend-Modi überleben, oder light only zu deklarieren und auf die Beta zu warten, die es unterstützt. Was nicht verfügbar ist, ist es von innen auf der Seite herauszufinden, was bedeutet, dass der nächste Bericht “die Farben sehen falsch aus” einer ist, dem Sie glauben sollten.

WebKits Ankündigung mit den Beispielen und der vollständigen Liste dessen, was und was nicht transformiert wird, ist Introducing Adaptive Dark Mode.