Dark Mode mit prefers-color-scheme, color-scheme und light-dark()

Worum es geht

prefers-color-scheme ist ein Media-Feature mit den Werten light und dark; MDN beschreibt es so, dass damit erkannt wird, ob Nutzende über eine Betriebssystem- oder Browsereinstellung ein helles oder dunkles Thema verlangt haben. Es beantwortet nur eine Frage. Die Eigenschaft color-scheme tut etwas: Sie erklärt, in welchen Schemata ein Element dargestellt werden darf (normal, light, dark, light dark, oder only light, um Übersteuerungen zu verbieten), und MDN listet auf, was der Browser dann an das verwendete Schema anpasst: die Zeichenfläche, die Standardfarben der Scrollbalken, die Standardfarben der Formularelemente und andere vom Browser bereitgestellte Bedienelemente wie Unterstreichungen der Rechtschreibprüfung. <meta name="color-scheme" content="light dark"> im head, vor jedem Stylesheet platziert, teilt dem Browser dasselbe mit, bevor CSS eintrifft; MDN empfiehlt es, um ein Aufblitzen beim Laden der Seite zu verhindern. Schliesslich gibt light-dark(a, b) ohne Media Query die erste Farbe zurück, wenn das verwendete Schema hell oder nicht gesetzt ist, und die zweite, wenn es dunkel ist; MDN hält fest, dass dies nur funktioniert, wenn color-scheme den Wert light dark hat, üblicherweise auf :root gesetzt.

Warum es wichtig ist

Ein Stylesheet, das unter der Media Query nur Hintergründe verdunkelt, erzeugt eine dunkle Seite mit weissen nativen Eingabefeldern, weissen Scrollbalken und einem weissen Aufblitzen, bevor die Stile greifen. Das Deklarieren von color-scheme behebt die nativen Teile; die Media Query und light-dark() übernehmen die eigenen Farben der Autorenschaft.

So wird es angewendet

• color-scheme: light dark auf :root setzen und das entsprechende Meta-Tag im head ergänzen; der Browser stellt native Bedienelemente jetzt in beiden Schemata korrekt dar.
• Die Palette an einer Stelle als Custom Properties definieren, entweder mit zwei Blöcken (:root { … } @media (prefers-color-scheme: dark) { :root { … } }) oder mit light-dark() je Token.
• Reines Schwarz auf reinem Weiss und umgekehrt vermeiden; die Sättigung von Akzentfarben in der dunklen Palette verringern und den Kontrast in beiden Schemata prüfen, da ein auf Weiss bestehendes Verhältnis auf Dunkelgrau scheitern kann.
• Bilder ersetzen oder umfärben: <picture> mit einer media="(prefers-color-scheme: dark)"-Quelle für Logos und Diagramme; inline-SVG kann currentColor verwenden.
• Für einen von Nutzenden bedienbaren Umschalter eine Klasse oder ein data-theme-Attribut auf html aus einem Inline-Skript setzen, das vor dem ersten Rendern läuft, die Wahl speichern und "System" als Standardzustand behandeln.

Stolpersteine

Schatten verschwinden auf dunklen Hintergründen; Erhöhung (Elevation) braucht stattdessen hellere Flächen. Transparente PNGs gehen von einer hellen Seite aus. Eingebettete Inhalte und iframes von Drittanbietern übernehmen die Wahl nicht. only light nimmt ein Element aus dem Schema der Nutzenden heraus, was nur selten gerechtfertigt ist.

Ein Umschalter muss auch color-scheme setzen

Ein Theme-Umschalter, der nur Custom Properties austauscht, belässt native Bedienelemente im Schema des Betriebssystems: dunkle Seite, aber helle Eingabefelder und Scrollbalken. Das Attribut muss auch color-scheme setzen:

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

Damit folgen light-dark()-Tokens dem Umschalter automatisch, weil die Funktion aus dem verwendeten Farbschema des Elements aufgelöst wird; eine als zwei prefers-color-scheme-Blöcke geschriebene Palette tut das nicht und braucht ihren dunklen Block zusätzlich unter [data-theme="dark"] wiederholt. Die gespeicherte Wahl aus einem Inline-Skript vor dem ersten Rendern anwenden (mit einer Nonce oder einem Hash unter einer strikten Content Security Policy), <meta name="color-scheme"> aus demselben Skript aktualisieren und 'System', das kein Attribut setzt, als Standard beibehalten.