color-scheme

Sie wissen, wie wir heutzutage „Dark Mode“ und „Light Mode“ haben? Browser haben auch in ihren Standardstilen integrierte „dunkle“ und „helle“ Farbschemata. Die CSS-Eigenschaft color-scheme erlaubt es dem Browser, bestimmte Elemente mit seinen dunklen oder hellen Standardstilen anzuzeigen (oder auszuwählen).

:root {
  color-scheme: light dark;
}

Die Eigenschaft color-scheme ist in der CSS Color Adjustment Module Level 1 Spezifikation definiert, wo sie als „Opting Into a Preferred Color Scheme“-Eigenschaft bezeichnet wird.

Das ist ein großartiger Name dafür, denn die Einstellung ermöglicht es den light- und dark-Farbschemata des Browsers, wirksam zu werden, wenn er die Systempräferenzen eines Benutzers erkennt. Wenn der Benutzer Helles bevorzugt, erhält er das light-Farbschema des Browsers. Bevorzugt Dunkles? Stattdessen erhält er das dark-Farbschema.

Stellen Sie es sich so vor, als würden Sie dem Browser einen Hinweis auf die Hauptfarbe einer Seite geben. Wenn die Hauptfarbe light ist – wie z. B. ein weißer Hintergrund – dann ist es am besten, wenn die Standardfarbe eines Elements einen dunkleren Kontrast aufweist. Wenn die Hauptfarbe dark ist, dann sind die Elemente mit einem helleren Erscheinungsbild besser bedient.

Und sobald der Browser den Hinweis erhält, wendet er automatisch sein entsprechendes color-scheme aus seiner Stylesheet an, ohne dass wir zusätzliche Stile oder Media Queries schreiben müssen.

Die **CSS Color Adjustment Module Level 1 Spezifikation** befindet sich zum Zeitpunkt der Erstellung noch im Editor's Draft-Status. Das bedeutet, dass sich die Funktion zwischen jetzt und der Veröffentlichung als Candidate Recommendation ändern kann. Browser können die Funktion zwischen jetzt und dann implementieren, aber die Funktion gilt immer noch als experimentell.

Syntax

color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?

• Anfangswert: normal
• Gilt für: alle Elemente und Texte
• Vererbt: ja
• Prozentwerte: n/v
• Berechneter Wert: Wie angegeben
• Animationstyp: diskret

Die CSS-Eigenschaft color-scheme kann auf das :root-Element angewendet werden, sodass sie global vererbt wird, oder sie kann auf ein einzelnes Element gesetzt werden.

Werte

/* Keyword values */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: dark light;
color-scheme: only light;
color-scheme: only dark;

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

normal

Dieser Wert verhindert, dass ein Element Elemente in die hellen und dunklen Farbschemata des Betriebssystems aufnimmt. Stattdessen wird das Standardfarbschema des Browsers verwendet.

Dies kann verwendet werden, um das geerbte Farbschema eines Elements zurückzusetzen. Nehmen wir an, Sie setzen color-scheme auf das :root-Element

:root {
  color-scheme: dark;
}

Alle Elemente erben diesen Stil. Wenn wir möchten, dass ein bestimmtes Element diesen Stil nicht übernimmt, dann ist es hier, wo normal die Dinge auf die Browser-Standardeinstellungen zurückführt.

:root {
  color-scheme: dark;
}

.some-element {
  color-scheme: normal;
}

light

Dieser Wert nimmt Elemente in das helle Farbschema des Betriebssystems auf.

dark

Dieser Wert nimmt Elemente in das dunkle Farbschema des Betriebssystems auf.

only

Dieser Wert wird zusammen mit dem Wert light oder dark verwendet.

:root {
  color-scheme: only light;
}

Wenn wir das tun, sagen wir dem Browser, dass er ein Element *nur* für das helle Farbschema oder *nur* für das dunkle aufnehmen soll. Wenn wir also color-scheme: only light für ein Element festlegen, kann dieses Element das helle Farbschema des Betriebssystems empfangen, aber nicht sein dunkles Farbschema verwenden … und umgekehrt.

Gleichzeitige Aufnahme von hellen *und* dunklen Farbschemata

Das können wir absolut tun.

/* Light and dark color schemes are supported,
   but `light` is my preferred option. */
:root {
  color-scheme: light dark;
}

Beachten Sie, dass die Reihenfolge wichtig ist. Auch wenn ein Element in beide Farbschemata aufgenommen wird, hat das erste die höchste Priorität. Das Setzen beider Werte auf :root ist eine gute Möglichkeit, sicherzustellen, dass alle Ihre Elemente Farbschemata unterstützen, während Sie sich auf eines davon konzentrieren.

Die genauen Farben liegen im Ermessen des Browsers.

Browser enthalten ihre eigenen Stylesheets. Wir nennen diese User Agent (was nur ein schickes Wort für „Browser“ ist) Styles. Werfen wir einen Blick auf einige der CSS in WebKit's Stylesheet

a:any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
}

Sehen Sie die -webkit-link Farbe? Das ist eine benannte Farbe, die nur WebKit erkennt und die standardmäßig auf alle Links angewendet wird, es sei denn, wir überschreiben sie mit unserem eigenen CSS. Wenn also eine Rendering-Engine wie WebKit feststellt, dass wir color-scheme: light oder color-scheme: dark für ein Element gesetzt haben, entscheidet sie, welche Version dieser Farbe für die Situation am besten geeignet ist.

Die Spezifikation erläutert dies

Helle und dunkle Farbschemata sind keine spezifischen Farbpaletten. Zum Beispiel wären ein knalliges Schwarz-auf-Weiß-Schema und ein Sepia-Dunkel-auf-Beige-Schema beide als helle Farbschemata zu betrachten. Um bestimmte Vordergrund- oder Hintergrundfarben sicherzustellen, müssen sie explizit angegeben werden.

Aber manchmal liegt die Farbe beim Benutzer

Betriebssysteme erlauben es Benutzern oft, ihre Systemfarben mit einem bevorzugten Farbschema zu überschreiben.

Dies sind die Präferenzen, die ein Browser überprüft, wenn er color-scheme auf einem Element deklariert sieht. Wenn der Benutzer eine Farbe aus diesen Präferenzen auswählt, dann werden die Standardstile des Browsers diese Betriebssystemeinstellungen berücksichtigen.

Es gibt auch ein entsprechendes <meta>-Tag.

Wir können die gleichen Vorteile erzielen, indem wir das <meta name="color-scheme">-Tag in den <head> des HTML einer Webseite einfügen.

<head>
  <meta name="color-scheme" content="dark light">
</head>

Es ist nicht notwendig, das Farbschema sowohl in HTML als auch in CSS anzugeben, aber es kann in Situationen nützlich sein, in denen Ihr Stylesheet aus irgendeinem Grund nicht geladen wird. Auf diese Weise wird die Seite trotzdem in beide Farbschemata aufgenommen, auch wenn die CSS nicht verfügbar ist.

Wenn Sie zwischen dem HTML-Meta-Tag und der CSS-Eigenschaft wählen müssen, neigen Sie möglicherweise zum HTML. HTML ist sofort verfügbar. Die CSS-Methode hingegen erfordert, dass das Stylesheet heruntergeladen wird, bevor die Eigenschaft angewendet wird, und die dafür benötigte Zeit kann zu einem leichten Blitz ungenauer Farbthemen führen.

color-scheme dreht sich alles um Standarderscheinungen.

Elemente auf einer Seite, die Standardfarben aus dem User Agent Stylesheet haben – wie die background-color von Formularsteuerelementen und die color von Text – werden entsprechend dem color-scheme Wert aktualisiert. Apple erklärt dies schön in seinem „Supporting Dark Mode in Your Web Content“ Video

[color-scheme] ändert die Standard-Text- und Hintergrundfarben der Seite, um sie an das aktuelle Systemerscheinungsbild anzupassen, Standard-Formularsteuerelemente, Scrollbalken und andere benannte Systemfarben ändern ebenfalls automatisch ihr Aussehen.

Wir können dies mit einer schnellen und schmutzigen Demo sehen, bei der wir nur drei Elemente behandeln.

• Das Dokument :root,
• ein <h1>-Element und
• ein <button>

Beachten Sie, dass die Demo keine Farbe auf den Elementen setzt. Ich habe :root auf ein helles Farbschema gesetzt, sodass dies standardmäßig gerendert wird. Durch Klicken auf die Schaltfläche wird :root auf dark gesetzt.

Sehen Sie, was sich beim Wechsel von light zu dark geändert hat?

• Die background-color des Dokuments ändert sich von Weiß zu Schwarz.
• Die color der Überschrift 1 ändert sich von Schwarz zu Weiß.
• Die color des Buttons ändert sich ebenfalls von Schwarz zu Weiß.
• Die background-color des Buttons wechselt die Farbtöne.

Wenn wir DevTools öffnen, können wir sehen, dass die color der Überschrift 1 aus dem User Agent Stylesheet mit einem text-Wert kommt.

Ich bin mir ehrlich gesagt nicht sicher, auf welche Farbe text tatsächlich abgebildet wird. Aber wenn wir zum Tab „Computed“ wechseln, sehen wir, dass es Schwarz ist (rgb(0, 0, 0)).

Wenn wir den color-scheme-Eigenschaft von light zu dark umschalten, ändert sich dieser berechnete Wert zu Weiß (rgb(255, 255, 255)).

Diese Farben wurden nie in den von mir geschriebenen Stilen festgelegt – sie stammen aus dem Stylesheet des Browsers. Und die color-scheme-Eigenschaft steuert sie.

color-scheme unterscheidet sich von prefers-color-scheme.

Es ist leicht, die beiden zu verwechseln. Sie übernehmen schließlich die gleichen light- und dark-Werte!

Der Unterschied? Wiederum dreht sich color-scheme alles um **Standarderscheinungen**. Es weist den Browser an, die Farben in seinem Stylesheet zu aktualisieren.

prefers-color-scheme hingegen dreht sich alles darum, die Stile anzuwenden, die wir in unserem eigenen Stylesheet schreiben, und nur, wenn diese Bedingung erfüllt ist. Mit anderen Worten, alle Stilregeln, die wir innerhalb der Media Query schreiben, werden angewendet – es hat nichts mit den Standardstilen des Browsers zu tun.

Kehren wir zu unserem letzten Beispiel zurück, bei dem wir das color-scheme einer Seite geändert haben, die das :root-Dokument, eine Überschrift und einen Button enthält. Standardmäßig habe ich keine der Farben geändert, aber ich habe color-scheme: light deklariert. Das bedeutet, dass alle Farben aus dem Stylesheet des Browsers stammen.

:root {
  color-scheme: light;
}

Als wir das zu

:root {
  color-scheme: dark;
}

…änderten, änderten sich all diese Standardfarben aus dem Stylesheet des Browsers. Keine Media Queries erforderlich!

Nehmen wir nun an, wir deklarieren color-scheme nie. Wir würden die prefers-color-scheme Media Query verwenden, um diese Farben selbst zu ändern. Hier ist ein gekürztes Beispiel, das die background-color und color des :root-Elements ändert.

:root {
  background-color: white;
  color: black;
}

/* If user prefers a dark appearance */
@media (prefers-color-scheme: dark) {
  :root {
    background-color: black;
    color: white;
  }
}

Die Media Query wird nur angewendet, wenn die Systemdarstellung des Benutzers auf „Dunkel“ eingestellt ist.

Wenn diese Bedingung zutrifft, werden *alle* Stile, die wir dort hineinschreiben, angewendet – wir sind nicht nur auf die Standardfarben und -stile des Browsers beschränkt. Ändern wir zum Beispiel background-color und color zu völlig anderen Farben, wenn prefers-color-scheme: dark

Verwendung von color-scheme und prefers-color-scheme zusammen.

Die Wahrheit ist, dass es besser ist, die beiden zusammen zu verwenden. Warum? Sie tun unterschiedliche Dinge, ergänzen sich aber gut. Wir könnten die schönste Dark-Mode-Oberfläche der Welt mit prefers-color-scheme erstellen, aber einige Elemente – wie Formularsteuerelemente und Scrollbalken – liegen außerhalb unserer Kontrolle, ohne eine Menge von Standardbrowserstilen zu überschreiben. Wenn wir die beiden zusammen verwenden, erhalten wir eine einfache Möglichkeit, diese Standards zu wechseln, ohne den zusätzlichen Aufwand.

Browser-Unterstützung

Die Unterstützung für die CSS-Eigenschaft color-scheme ist ziemlich solide, solange Sie die Werte light und dark verwenden. Viele Browser unterstützen das Schlüsselwort only zum Zeitpunkt der Erstellung nicht, wobei Safari die einzige Ausnahme ist.

Desktop-Browser	IE	Edge	Chrome	Firefox	Safari	Opera
color-scheme	Nein	81+	81+	96+	13+	68+
Schlüsselwort: only dark	Nein	Nein	Nein	Nein	13+	Nein
Schlüsselwort: only light	Nein	Nein	Nein	Nein	13+	Nein

Mobile Browser	Safari iOS	Chrome Android	Firefox Android	Android Browser	Opera Mobile
color-scheme	13+	108+	107+	108+	72+
Schlüsselwort: only light	13+	Nein	Nein	Nein	Nein
Schlüsselwort: only dark	13+	Nein	Nein	Nein	Nein

Weitere Informationen

• CSS Color Adjustment Level Module 1 (W3C)
• A Quick Look at the First Public Working Draft for Color Adjust Module 1 (CSS-Tricks)
• Don’t Forget the color-scheme Property (Jim Nielsen)
• Improved dark mode default styling with the color-scheme CSS property (web.dev)

Verwandte Tricks!

Verwandt