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 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“. 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 entspricht CanvasText einer Farbe, die sich in der Nähe von black befindet, und Canvas eine Farbe, die sich in der Nähe von white befindet. 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 wird, hängt vom Wert des prefers-color-scheme-Attributs „Zustand des Mediums“ 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() korrekt funktioniert, müssen Sie eine 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 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 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.