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

Systemfarben können auf den aktuell verwendeten color-scheme-Wert reagieren. Die Funktion light-dark() stellt 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, Hexadezimalfarben, Farbfunktionen, die mit einem bestimmten Farbraum verknüpft sind, 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 und in CSS-Farbmodulstufe 4 beschrieben werden. Diese Systemfarben werden vom Browser definiert und durch ein Keyword dargestellt.

Die Systemfarbe Canvas – nicht zu verwechseln mit dem Element <canvas> – steht beispielsweise für den „Hintergrund von Anwendungsinhalten oder Dokumenten“. Sie passt gut zu CanvasText und wird auch in Verbindung mit CanvasText verwendet, das „Text in Anwendungsinhalten oder Dokumenten“ darstellt.

In CSS werden sie so verwendet:

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

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

Ein Vorteil dieser Systemfarben besteht darin, dass sie auf den berechneten Wert der Property color-scheme reagieren können. Beispiel: Die Werte für CanvasText und Canvas werden umgedreht, wenn dark als color-scheme verwendet wird.

:root {
  color-scheme: dark;
}

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

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

  • Wenn der Wert auf light dark festgelegt ist, unterstützt das Element sowohl den hellen als auch den dunklen Modus. Welcher Wert verwendet werden soll, 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 festgelegt ist, unterstützt das Element ein dunkles Farbschema.
Eine Seite, auf der Sie den Wert für color-scheme ändern können. Bei einer Änderung ändern sich die Farben der Seite von hell zu dunkel oder umgekehrt, auch wenn die Deklarationen für das body-Element unverändert bleiben.

Jetzt neu: light-dark()

Unterstützte Browser

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

Quelle

Bisher war es nur den Systemfarben vorbehalten, auf den verwendeten color-scheme-Wert zu reagieren. Dank light-dark(), das im CSS-Farbmodul der Stufe 5 angegeben ist, haben Sie jetzt auch diese Möglichkeit.

light-dark() ist eine Funktion, die zwei Argumente akzeptiert, die beide <color> sein müssen. Eine von beiden 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 Preisvergleichsportalen überall dort verwendet werden, wo <color> akzeptiert wird. Beispielsweise in den Properties 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() richtig funktioniert, müssen Sie einen color-scheme angeben. Da diese Eigenschaft übernommen wird, legen Sie sie normalerweise für :root fest. Wenn Sie möchten, können Sie 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;
  }
}
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 light dark bei :root festgelegt ist, ändern sich die Werte dieser Farben automatisch, wenn Sie den Modus Ihres Betriebssystems von hell auf dunkel und umgekehrt umstellen.

: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 können Sie für einen bestimmten untergeordneten Knoten des DOM festlegen, dass nur der helle oder dunkle Modus verwendet werden soll. Dazu setzen Sie color-scheme auf dark oder light. 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 einen hellen oder dunklen Modus erzwingen. Dazu wird der Wert color-scheme manipuliert.