light-dark()

Baseline 2024
Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die light-dark() CSS <color>-Funktion ermöglicht es, zwei Farben für eine Eigenschaft festzulegen – und gibt eine der beiden Farboptionen zurück, indem sie erkennt, ob der Entwickler ein helles oder dunkles Farbschema festgelegt hat oder der Benutzer ein helles oder dunkles Farbthema angefordert hat – ohne dass die Themenfarben innerhalb einer prefers-color-scheme Media-Feature-Abfrage umschlossen werden müssen. Benutzer können ihre Farbschema-Präferenz über die Einstellungen ihres Betriebssystems (z. B. Licht- oder Dunkelmodus) oder die Einstellungen ihres Benutzeragenten angeben. Die light-dark()-Funktion ermöglicht es, zwei Farbwerte bereitzustellen, wobei jeder <color>-Wert akzeptiert wird. Die light-dark()-CSS-Farb-Funktion gibt den ersten Wert zurück, wenn die Präferenz des Benutzers auf light gesetzt ist oder keine Präferenz gesetzt ist, und den zweiten Wert, wenn die Präferenz des Benutzers auf dark gesetzt ist.

Um Unterstützung für die light-dark()-Farb-Funktion zu ermöglichen, muss die color-scheme den Wert light dark haben, der normalerweise auf der :root Pseudoklasse gesetzt ist.

css
:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

Syntax

css
/* Named color values */
color: light-dark(black, white);

/* RGB color values */
color: light-dark(rgb(0 0 0), rgb(255 255 255));

/* Custom properties */
color: light-dark(var(--light), var(--dark));

Werte

Funktionale Notation: light-dark(light-color, dark-color)

light-color

<color>-Wert, der für das helle color-scheme festgelegt werden soll.

dark-color

<color>-Wert, der für das dunkle color-scheme festgelegt werden soll.

Formale Syntax

<light-dark()> = 
  light-dark( <color> , <color> )

Beispiel

Farben basierend auf dem Farbschema festlegen

Standardmäßig hängt in unterstützenden Browsern die von der light-dark()-Farb-Funktion zurückgegebene Farbe von der Benutzerpräferenz ab, die über die Einstellungen des Betriebssystems (z. B. Licht- oder Dunkelmodus) oder von einer Benutzereinstellung festgelegt wird. Sie können diese Einstellung auch in den Entwicklertools des Browsers ändern.

HTML

Wir fügen drei Abschnitte ein, um helle Farben, dunkle Farben und die auf der bevorzugten Farbpalette des Benutzers basierenden Farben anvisieren zu können.

html
<h1><code>light-dark()</code> CSS function</h1>
<section>
  <h2>Automatic</h2>
  <p>This section will react to the users system or user agent setting.</p>
</section>
<section class="light">
  <h2>Light</h2>
  <p>
    This section will be light due to the <code>color-scheme: light;</code>.
  </p>
</section>
<section class="dark">
  <h2>Dark</h2>
  <p>This section will be dark due to the <code>color-scheme: dark;</code>.</p>
</section>

CSS

Wir fügen Farben sowohl für helle als auch für dunkle Themen hinzu. Wir definieren auch color-scheme für das Dokument im :root, um die light-dark()-Farb-Funktion für das gesamte Dokument zu aktivieren.

css
:root {
  /* this has to be set to switch between light or dark */
  color-scheme: light dark;

  --light-bg: ghostwhite;
  --light-color: darkslategray;
  --light-code: tomato;

  --dark-bg: darkslategray;
  --dark-color: ghostwhite;
  --dark-code: gold;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}
code {
  color: light-dark(var(--light-code), var(--dark-code));
}

Zusätzlich zur Aktivierung der light-dark()-Funktion ermöglicht die color-scheme-Eigenschaft das Überschreiben des Farbschemas eines Benutzers für Dokumentabschnitte. Das Erzwingen eines Seitenabschnitts, nur ein helles oder dunkles Farbschema zu verwenden, kann durch Setzen der color-scheme-Eigenschaft auf light oder dark erfolgen.

Hinweis: Im Allgemeinen sollte dies nicht getan werden, hier verwenden wir es zu Demonstrationszwecken. Wenn der Benutzer eine Präferenz getroffen hat, sollten Sie seine Präferenzen im Allgemeinen nicht überschreiben.

css
.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}

Ergebnis

Spezifikationen

Specification
CSS Color Module Level 5
# light-dark

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch