Safari färbt Websites jetzt selbst dunkel: Was der adaptive Dunkelmodus in iOS 27.3 und macOS 27.3 mit deiner Website macht – und wie du ihn prüfst oder abschaltest

01 / Was neu ist

Was Safari mit hellen Websites jetzt macht.

Apple hat am 3. November 2026 die ersten Betas von iOS 27.3, iPadOS 27.3 und macOS 27.3 an Entwicklerinnen und Entwickler verteilt [5]. Darin steckt Safari 27.3 mit einer neuen Funktion: Adaptive Dark Mode. Laut Apples Release Notes passt sie helle Webseiten, die selbst keinen Dark Mode unterstützen, automatisch dunkel an, „bei Nacht oder in dunkler Umgebung“ [2]. Safari 27.3 gibt es als Beta auch für macOS 26 und macOS Sequoia [2].

So läuft es für die Nutzerinnen und Nutzer ab: Wer sein Gerät auf das dunkle Erscheinungsbild gestellt hat und eine Seite mit hellem Hintergrund öffnet, bekommt von Safari eine Vorschau mit der Schaltfläche „Try“ angeboten [1][3]. Danach lässt sich die Funktion für alle Websites einschalten oder Seite für Seite [3][4]. Die Entscheidung trifft also dein Besucher, nicht du. Laut WebKit ist die Funktion nur aktiv, wenn jemand sie einschaltet [1].

Warum Apple das macht, erklärt das WebKit-Team mit zwei Zahlen: Fast 40 Prozent der Seitenaufrufe kommen von Menschen im Dark Mode, aber nur 10 Prozent der Seitenaufrufe unterstützen ihn [1]. Die Lücke will Safari jetzt selbst schließen.

Wann Safari nicht eingreift, ist klar geregelt [1]:

• Die Seite meldet einen eigenen Dark Mode an: per <meta name="color-scheme" content="light dark"> im HTML oder color-scheme: light dark im CSS. Dann ändert Adaptive Dark Mode „nichts“.
• Die Seite ist schon dunkel: Safari analysiert die Farben. Überwiegt ein dunkler Hintergrund mit heller Schrift, bleibt alles, wie es ist.
• Alle anderen hellen Seiten: werden dunkel umgefärbt, sobald die Person die Funktion nutzt.

Neben dem Dark Mode bringt Safari 27.3 auch vertikale Tabs und neue Siri-AI-Aktionen für Tabs [3][4]. Für deine Website zählt aber vor allem das Abdunkeln.

02 / Was passiert

Was beim Abdunkeln mit Farben, Logos und Bildern passiert.

Das ist keine einfache Farbumkehr wie bei der Bedienungshilfe „Farben umkehren“. WebKit beschreibt eine Farbmatrix, die die Helligkeit von Farben umkehrt, den Farbton aber erhält. Helle Hintergründe werden dunkel, dunkle Schrift wird hell. Beim Text zielt Safari auf ein Kontrastverhältnis von 4,5:1 nach WCAG, helle CSS-Verläufe werden ebenfalls dunkel [1]. Deine Markenfarbe bleibt also im Prinzip erkennbar, sie wird aber heller oder dunkler.

Spannender für Shops und Firmenseiten ist der Umgang mit Grafiken:

• Fotos: Die meisten Bilder bleiben unverändert [1]. Ein Produktfoto auf weißem Hintergrund steht dann als heller Kasten auf einer dunklen Seite.
• Logos und Icons als SVG: Safari prüft sie und färbt sie um, wenn der Kontrast sonst verloren ginge [1]. MacRumors beschreibt das als Umfärben von Vektorgrafiken [3].
• Logos als PNG oder JPG: Safari wertet die Pixelverteilung aus und invertiert einfache Schwarz-Weiß-Logos [1]. Dein dunkles Logo kann also plötzlich weiß erscheinen.
• Effekte: Masken und mix-blend-mode schaltet Safari in manchen Fällen ab, Inhalte in <canvas> bleiben unverändert [1].

Laut MacRumors hebt Safari außerdem erhöhte Flächen wie Karten optisch an und gleicht Schatten neu aus. Nicht jede Anpassung wird auf jede Seite angewendet, sondern nur das, was für die Lesbarkeit nötig ist [3].

Du siehst es nicht in deinen Daten

Ein Punkt, den du kennen solltest: Websites können nicht erkennen, ob Adaptive Dark Mode aktiv ist. JavaScript, das CSS-Farben abfragt, bekommt die ursprünglichen Farben zurück, Bilder in einem Canvas werden im Original gezeichnet [1]. Apple begründet das mit dem Schutz vor Fingerprinting. Für dich heißt das: Kein Analytics-Tool und kein Tag-Manager-Trigger wird dir sagen, wie viele Besucher deine Seite abgedunkelt sehen. Du musst sie dir selbst ansehen.

03 / Shopify und WordPress

Warum viele Shops und WordPress-Seiten betroffen sind.

Ob Safari deine Seite umfärbt, hängt allein davon ab, ob sie einen Dark Mode anmeldet. Ich habe dafür die Standardthemes der beiden Systeme durchsucht, mit denen die meisten meiner Kundinnen und Kunden arbeiten.

Shopify: In den Liquid- und CSS-Dateien der Themes Dawn und Horizon im öffentlichen GitHub-Repository von Shopify steht weder ein color-scheme-Meta-Tag noch eine color-scheme-Eigenschaft oder eine prefers-color-scheme-Abfrage (Stand 04.11.2026) [8][9]. Die „Farbschemata“, die du im Theme-Editor einstellst, sind feste Farbkombinationen für Abschnitte und reagieren nicht auf den Dark Mode des Geräts. Eine Ausnahme sind Dark-Mode-Apps oder angepasste Themes; das musst du im Einzelfall prüfen.

WordPress: Auch im aktuellen Standardtheme Twenty Twenty-Five (Version 1.5) finden sich in style.css und theme.json keine entsprechenden Angaben [10]. Bei Divi-, Elementor- oder Kauf-Themes hängt es vom Theme und von Plugins ab.

Daraus folgt: Viele helle Shops und Firmenseiten werden ab Dezember für alle, die die Funktion einschalten, dunkel dargestellt (Einschätzung). Kritisch wird das an diesen Stellen:

• Logo im Header: Ein dunkles PNG-Logo kann invertiert werden. Bei mehrfarbigen Logos ist das Verhalten offen, hier hilft nur der Test.
• Produktbilder mit weißem Hintergrund: Sie bleiben meist hell und wirken auf dunkler Seite wie Kacheln. WebKit rät zu Bildern mit transparentem Hintergrund, statt die Seitenfarbe ins Bild zu „backen“ [1]. Bei Freistellern für Google Shopping ist ein weißer Hintergrund allerdings gewollt, das ist eine Abwägung.
• Grafiken mit Text: Banner, Größentabellen oder Infografiken als Bild bleiben hell, während die Seite drumherum dunkel wird.
• Markenfarben und Buttons: Die Helligkeit verschiebt sich. Prüfe, ob „In den Warenkorb“ noch so auffällt wie vorher.
• Eingebettete Inhalte: Zahlungs-Widgets, Bewertungs-Badges, Karten oder Werbeflächen. Wie Safari Iframes behandelt, beschreibt WebKit nicht.

Wenn du schon den Beitrag zum Safari-Preisalarm für Produktseiten umgesetzt hast, kennst du das Muster: Safari bekommt neue Funktionen, die direkt auf deine Shop-Seiten wirken, und du entscheidest nur über sauberes Markup mit.

04 / Prüfen

Wie du deine Website jetzt schon testest.

Bis Dezember ist die Funktion nur in den Betas verfügbar. Für den Test reicht ein Gerät, kein ganzes Team:

1. Beta-Gerät wählen: Nutze ein Testgerät oder einen Test-Mac mit der Beta von iOS 27.3 oder macOS 27.3. Am Mac gibt es Safari 27.3 Beta auch für macOS 26 und macOS Sequoia [2], dann musst du nicht das ganze System auf eine Beta heben. Installiere Betas nicht auf deinem einzigen Arbeitsgerät (Einschätzung). Mit Xcode 27.3 und dem iOS-Simulator sollte der Test ebenfalls möglich sein; das habe ich nicht selbst geprüft.
2. Dunkles Erscheinungsbild einschalten: Ohne Dark Mode im System bietet Safari die Funktion nicht an [1].
3. Typische Seiten öffnen und „Try“ tippen: Startseite, eine Kategorie, zwei Produktseiten (eine mit hellem, eine mit farbigem Bild), Warenkorb, Kontaktformular, Blogbeitrag.
4. Screenshots vergleichen: Hell gegen abgedunkelt. Achte auf Logo, Buttons, Preise, Formulare, Hinweise wie Versandkosten und Cookie-Banner.
5. Probleme notieren und melden: Was nicht funktioniert, kannst du über die Feedback-Assistent-App an Apple melden. Als Website-Betreiber nennt WebKit zusätzlich die Adresse web-evangelist@apple.com [1].

Teste nach jeder neuen Beta erneut. WebKit schreibt selbst, dass sich die Funktion im Lauf der Betaphase weiterentwickelt [1].

05 / Entscheiden

Abschalten oder eigenen Dark Mode bauen?

Sieht dein Shop abgedunkelt gut aus, musst du nichts tun. Wenn nicht, hast du drei Wege. Alle laufen über die CSS-Eigenschaft color-scheme, die es in Safari seit Version 12.1 gibt [6][7].

Weg 1: Seite oder Bereich hell halten

Mit dem Schlüsselwort only sagst du dem Browser, dass eine Seite oder ein Element nur hell angezeigt werden soll [1][7]. Das geht als Meta-Tag für die ganze Seite oder per CSS gezielt für einzelne Elemente, etwa nur für den Header mit Logo:

<!-- ganze Seite hell halten, im <head> -->
<meta name="color-scheme" content="light only">

/* oder per CSS, nur für einzelne Bereiche */
.site-header,
.produkt-galerie {
  color-scheme: light only;
}

Wichtig: In Safari 27.3 Beta 1 wird das Schlüsselwort only noch nicht unterstützt [1]. Ob es bis zur finalen Version im Dezember funktioniert, ist offen. Du kannst es trotzdem schon setzen, es schadet nichts (Einschätzung), musst die Wirkung aber in einer späteren Beta prüfen.

Weg 2: Eigenen Dark Mode anmelden und gestalten

Das ist der saubere Weg, und WebKit empfiehlt ihn ausdrücklich [1]. Du meldest mit light dark beide Varianten an und legst die dunklen Farben selbst fest, am einfachsten über CSS-Variablen und prefers-color-scheme oder die Funktion light-dark() [1][11]. Für ein helles Logo im Dark Mode nutzt du ein <picture>-Element mit einer Quelle für prefers-color-scheme: dark [1].

:root {
  color-scheme: light dark;
  --hintergrund: light-dark(#ffffff, #14181f);
  --text: light-dark(#1d1d1f, #f2f2f2);
}
body {
  background: var(--hintergrund);
  color: var(--text);
}

Achtung bei der Abkürzung: light dark allein ohne eigene Farben ist keine gute Idee. Mit dieser Angabe schaltet Safari Standardfarben, Formularfelder und Scrollbalken auf dunkel [6]. Hat dein Theme den Hintergrund fest auf Weiß gesetzt, entstehen schnell dunkle Eingabefelder auf weißer Seite. In der aktuellen Beta ist das trotzdem der einzige dokumentierte Weg, Adaptive Dark Mode sicher zu umgehen [1].

Weg 3: Website fit für das Abdunkeln machen

Wer keinen eigenen Dark Mode bauen will, kann Safari die Arbeit erleichtern. WebKit nennt dafür: Logos und Icons als SVG statt als Pixelbild, Farben und Verläufe in CSS statt gekachelter Hintergrundbilder, moderne CSS-Effekte statt Bild-Sprites und Inhaltsbilder mit transparentem Hintergrund [1]. Das ist ohnehin gute Praxis für schnelle Seiten.

Egal, welchen Weg du wählst: Die Angabe gehört direkt in den <head> oder ins CSS auf :root bzw. body. WebKit rät ausdrücklich davon ab, sie erst später per JavaScript einzufügen [1]. Ein Meta-Tag über den Google Tag Manager ist deshalb keine Lösung. In Shopify gehört er in theme.liquid, in WordPress ins Child-Theme oder in ein kleines Plugin, damit er Theme-Updates übersteht.

Quellen

Quellen

1. WebKit Blog (Simon Fraser, Luming Yin, Lily Spiniolas, Joanne Pan, Veda Periwal, Jen Simmons): „Introducing Adaptive Dark Mode“, 3. November 2026 – webkit.org · abgerufen 04.11.2026.
2. Apple Developer: „Safari 27.3 Beta Release Notes“, 3. November 2026 – developer.apple.com · abgerufen 04.11.2026.
3. MacRumors (Juli Clover): „iOS 27.3 Adds Vertical Tabs and Adaptive Dark Mode to Safari“, 3. November 2026 – macrumors.com · abgerufen 04.11.2026.
4. 9to5Mac (Chance Miller): „iOS 27.3 and macOS 27.3 add Vertical Tabs, Adaptive Dark Mode, and more to Safari“, 3. November 2026 – 9to5mac.com · abgerufen 04.11.2026.
5. Apple Developer News: „Get ready with the latest beta releases“, 3. November 2026 – developer.apple.com · abgerufen 04.11.2026.
6. WebKit Blog: „Dark Mode Support in WebKit“, 2019 – webkit.org · abgerufen 04.11.2026.
7. MDN Web Docs: „color-scheme“ – developer.mozilla.org · abgerufen 04.11.2026.
8. Shopify auf GitHub: Theme Dawn, layout/theme.liquid und Theme-Dateien – github.com · abgerufen 04.11.2026.
9. Shopify auf GitHub: Theme Horizon, layout/theme.liquid und Theme-Dateien – github.com · abgerufen 04.11.2026.
10. WordPress Theme-Verzeichnis: Twenty Twenty-Five 1.5, theme.json – themes.svn.wordpress.org · abgerufen 04.11.2026.
11. WebKit Blog: „WebKit Features in Safari 17.5“ (light-dark()) – webkit.org · abgerufen 04.11.2026.

Alle Quellen am 4. November 2026 abgerufen. Adaptive Dark Mode ist Stand heute nur in der ersten Beta von Safari 27.3 enthalten; Verhalten und Opt-out können sich bis zur finalen Version ändern. Aussagen ohne belastbare Quelle sind im Text als Einschätzung gekennzeichnet; die Ziffern in eckigen Klammern verweisen auf die Nummern dieser Liste.