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

Systemfarben können auf den aktuell verwendeten color-scheme-Wert reagieren. Die Funktion light-dark() bietet Autoren dieselbe Möglichkeit.

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-Farbcodes, Farbfunktionen, die mit einem bestimmten Farbraum verknüpft sind, oder die allgemeinere Funktion color() 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 bezeichnet werden und im CSS Color Module Level 4 angegeben sind. Diese Systemfarben werden vom Browser definiert und durch ein Schlüsselwort dargestellt.

Die Systemfarbe Canvas (nicht zu verwechseln mit dem Element <canvas>) steht beispielsweise für den „Hintergrund von Anwendungsinhalten oder Dokumenten“. Es lässt sich gut mit CanvasText kombinieren, das für „Text in Anwendungsinhalten oder Dokumenten“ steht, und sollte auch in Verbindung damit verwendet werden.

In CSS werden sie so verwendet:

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

Standardmäßig ergibt CanvasText eine Farbe, die black ähnelt, und Canvas eine Farbe, die white ähnelt. Die tatsächliche Implementierung hängt vom Browser ab. Beispielsweise führt CanvasText in Chrome zu #121212, während Safari es als etwas helleres #1e1e1e angibt.

Ein versteckter Vorteil dieser Systemfarben ist, dass sie auf den berechneten Wert der Property color-scheme reagieren können. Beispielsweise werden die Werte für CanvasText und Canvas umgekehrt, wenn die 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 ist, und sehen, wie die Seite reagiert.

  • Wenn der 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 Medienbedingung prefers-color-scheme ab.
  • Wenn der Wert auf light gesetzt ist, unterstützt das Element ein helles Farbschema.
  • Wenn der Wert auf dark gesetzt ist, unterstützt das Element ein dunkles Farbschema.
Eine Seite, auf der Sie den Wert für color-scheme ändern können. Beim Wechsel von hell zu dunkel oder umgekehrt ändern sich die Farben der Seite, obwohl die Deklarationen für das body-Element gleich bleiben.

Jetzt neu: light-dark()

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Bisher war die Reaktion auf den verwendeten color-scheme-Wert den Systemfarben vorbehalten. Dank light-dark(), das im CSS Color Module Level 5 spezifiziert ist, haben Sie jetzt dieselbe Möglichkeit.

light-dark() ist eine Funktion, die zwei Argumente akzeptiert, die beide vom Typ <color> sein müssen. Je nach verwendetem Farbschema wird eine der beiden Farben 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 eine <color> akzeptiert wird. Beispielsweise in den Attributen color und background-color, aber auch in einer Funktion wie linear-gradient().

Im folgenden Beispiel ist die verwendete Hintergrundfarbe im dunklen Modus #333 und im hellen Modus (oder einem unbekannten Modus) #ccc.

:root {
  color-scheme: light dark;
}

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

Damit light-dark() richtig funktioniert, müssen Sie einen color-scheme angeben. Da diese Property vererbt wird, legen Sie sie normalerweise für :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 durch einen anderen Wert in einer prefers-color-scheme-Medienbedingung ü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;
  }
}
Eine Seite, die über prefers-color-scheme auf den hellen oder dunklen Modus reagiert.
Die Farbwerte werden in CSS mithilfe einer Medienabfrage geändert.

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

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}
Eine Seite, die mit prefers-color-scheme auf den hellen oder dunklen Modus reagiert.
Die Farbwerte werden mit light-dark() geändert.

Als zusätzlichen Bonus ist es möglich, einen bestimmten Unterbaum des DOM zu zwingen, nur den hellen oder dunklen Modus zu verwenden, indem Sie color-scheme auf dark oder light setzen. Im folgenden Beispiel wird dies auf :root angewendet.

Eine Seite, die mit prefers-color-scheme auf den hellen oder dunklen Modus reagiert.
Die Farbwerte werden mit light-dark() geändert.
Mit einer der Optionen können Sie den hellen oder dunklen Modus erzwingen. Dies wird durch die Bearbeitung des Werts color-scheme erreicht.