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 dieselben Möglichkeiten.

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.

Neben diesen verschiedenen Namen und Formaten enthält CSS Farben, die als Systemfarben beschrieben werden und im CSS-Farbmodul 4 angegeben sind. 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“. Es passt gut zu und ist für die Verwendung in Verbindung mit CanvasText vorgesehen, das den „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 black ähnelt, und Canvas eine Farbe, die white ähnelt. Die tatsächliche Implementierung hängt vom Browser ab. Beispiel: CanvasText in Chrome ergibt #121212, während in Safari die etwas hellere Farbe #1e1e1e festgelegt 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 wird, hängt vom Wert des prefers-color-scheme-Attributs „Medienzustand“ ab.
• Wenn dieser Wert auf light festgelegt ist, unterstützt das Element ein helles Farbschema.
• Wenn dieser Wert auf dark festgelegt ist, unterstützt das Element ein dunkles Farbschema.

Jetzt neu: light-dark()

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. Je nach verwendetem Farbschema wird eine der beiden Optionen 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 eine <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 ist die verwendete Hintergrundfarbe #333 im Dunkelmodus oder #ccc im hellen Modus (oder in einem unbekannten Modus).

: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 vererbt wird, wird sie normalerweise auf :root festgelegt. Sie können sie aber auch für ein bestimmtes Element festlegen.

Praktische Anwendung

Im folgenden Beispiel stehen einige benutzerdefinierte Properties für Farben auf der Seite. Für den dunklen Modus werden die Werte dieser benutzerdefinierten Properties 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 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);
}

Als zusätzlichen Bonus können Sie für einen bestimmten Unterbaum des DOM erzwingen, dass nur der helle oder dunkle Modus verwendet wird, indem Sie color-scheme auf dark oder light festlegen. Im folgenden Beispiel wird dies auf :root angewendet.