CSS-Farbschema-abhängige Farben mit „light-dark()“

Systemfarben können auf den aktuell verwendeten color-scheme-Wert reagieren. Mit der Funktion light-dark() stehen Autoren dieselben Möglichkeiten zur Verfügung.

Bramus

Systemfarben in CSS

In CSS können Sie viele Farben aus einem der vielen Farbräume verwenden. Sie können beispielsweise benannte Farben, Hex-Farben, mit einem bestimmten Farbraum verknüpfte Farbfunktionen oder die allgemeinere color()-Funktion verwenden.

Die benannte Farbe cornflowerblue kann beispielsweise auch als #6495ED, hsl(218.54deg 79.19% 66.08%) oder color(display-p3 0.43 0.58 0.9) dargestellt werden.

Zusätzlich zu diesen verschiedenen Namen und Formaten enthält CSS Farben, die als Systemfarben beschrieben werden, wie in CSS-Farbmodulebene 4 definiert. Diese Systemfarben sind Farben, die vom Browser definiert und durch ein Keyword dargestellt werden.

Beispielsweise steht die Systemfarbe Canvas – nicht zu verwechseln mit dem <canvas>-Element – für den „Hintergrund von App-Inhalten oder Dokumenten“. Sie lässt sich problemlos mit CanvasText kombinieren, der für „Text in Anwendungsinhalten oder Dokumenten“ steht.

In CSS werden sie so verwendet:

body {
  color: CanvasText;
  background-color: Canvas;
}

Standardmäßig ergibt CanvasText eine Farbe, die ungefähr bei black liegt, und Canvas eine Farbe, die nahe an white liegt. Die tatsächliche Implementierung hängt vom Browser ab. Beispiel: Für CanvasText in Chrome ergibt #121212, was in Safari als etwas helleres #1e1e1e angegeben wurde.

Eine verborgene Kraft dieser Systemfarben besteht darin, dass sie auf den berechneten Wert der color-scheme-Eigenschaft reagieren können. Die Werte für CanvasText und Canvas werden beispielsweise umgedreht, wenn der verwendete color-scheme dark ist.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

In der folgenden Demo können Sie den Wert von color-scheme ändern, der für :root festgelegt wurde, und sehen, wie die Seite reagiert.

• Wenn dieser Wert auf light dark gesetzt ist, unterstützt das Element sowohl den hellen als auch den dunklen Modus. Welcher Wert verwendet wird, hängt vom Wert der prefers-color-scheme-Medienbedingung ab.
• Wenn dieser Wert auf light gesetzt ist, bedeutet dies, dass das Element ein helles Farbschema unterstützt.
• Wenn dieser Wert auf dark gesetzt ist, bedeutet dies, dass das Element ein dunkles Farbschema unterstützt.

Jetzt neu: light-dark()

Bisher war die Reaktion auf den verwendeten color-scheme-Wert für die Systemfarben reserviert. Dank light-dark(), spezifiziert in CSS-Farbmodul Stufe 5, verfügen Sie jetzt ebenfalls über die gleichen Möglichkeiten.

light-dark() ist eine Funktion, die zwei Argumente akzeptiert, von denen beide ein <color> sein müssen. Eine der beiden Optionen wird je nach verwendetem Farbschema ausgewählt.

• Wenn das verwendete Farbschema light oder unbekannt ist, wird der berechnete Wert des ersten Werts zurückgegeben.
• Wenn das verwendete Farbschema dark ist, wird der berechnete Wert der zweiten Farbe zurückgegeben.

Das Ergebnis von light-dark() ist ein <color>. Sie kann in CSS überall dort verwendet werden, wo <color> akzeptiert wird. beispielsweise in den Attributen color und background-color, aber auch in einer Funktion wie linear-gradient().

Im folgenden Beispiel wird als Hintergrundfarbe #333 im dunklen Modus oder #ccc im hellen Modus (oder in einem unbekannten Modus) verwendet.

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

Damit light-dark() korrekt funktioniert, müssen Sie einen color-scheme angeben. Da diese Eigenschaft übernimmt, legen Sie sie in der Regel auf :root fest. Sie können sie aber auch für ein bestimmtes Element festlegen.

Praktische Anwendung

Im folgenden Beispiel stellen einige benutzerdefinierte Eigenschaften Farben auf der Seite dar. Für den dunklen Modus werden die Werte dieser benutzerdefinierten Eigenschaften in einer prefers-color-scheme-Medienbedingung durch einen anderen Wert überschrieben.

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

Dank light-dark() kann dieser Code vereinfacht werden. Da color-scheme auf :root auf light dark gesetzt ist, ändern sich die Werte dieser Farben automatisch, wenn das Betriebssystem vom hellen in den dunklen Modus wechselt und umgekehrt.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Außerdem können Sie erzwingen, dass in einer bestimmten Unterstruktur des DOM nur der helle oder der dunkle Modus verwendet wird. Dazu setzen Sie color-scheme entweder auf dark oder light. Im folgenden Beispiel wird dies auf :root angewendet.