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 das Setzen von zwei Farben für eine Eigenschaft – wobei eine der beiden Farboptionen zurückgegeben wird, indem erkannt wird, ob der Entwickler ein helles oder dunkles Farbschema festgelegt hat oder der Benutzer ein helles oder dunkles Thema angefordert hat – ohne die Notwendigkeit, die Themenfarben innerhalb einer prefers-color-scheme Medienabfrage zu kapseln. Benutzer können ihre Farbschema-Präferenzen über ihre Betriebssystemeinstellungen (z.B. hell oder dunkel Modus) oder die Einstellungen ihres Benutzeragenten angeben. Die light-dark() Funktion ermöglicht das Bereitstellen von zwei Farbwerten, 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 eingestellt ist oder keine Präferenz gesetzt ist, und den zweiten Wert, wenn die Präferenz des Benutzers auf dark eingestellt ist.

Um die Unterstützung für die light-dark() Farb-Funktion zu aktivieren, muss der Wert von color-scheme auf light dark gesetzt sein, was normalerweise auf der :root Pseudoklasse festgelegt wird.

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

Farbfestlegung basierend auf dem Farbschema

Standardmäßig hängt in unterstützenden Browsern die durch die light-dark() Farb-Funktion zurückgegebene Farbe von der durch das Betriebssystem eingestellten Benutzereinstellung ab (z.B. heller oder dunkler Modus) oder von einer Einstellung des Benutzeragenten. Sie können diese Einstellung auch in den Entwicklerwerkzeugen des Browsers ändern.

HTML

Wir fügen drei Abschnitte ein, um helle Farben, dunkle Farben und die basierend auf dem bevorzugten Farbschema des Benutzers ausgewählten Farben zu ermöglichen.

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 für sowohl helle als auch dunkle Themen hinzu. Wir definieren auch color-scheme für das Dokument auf dem :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));
}

Neben der Aktivierung der light-dark() Funktion ermöglicht die color-scheme Eigenschaft das Überschreiben eines Benutzerfarbschemas für Dokumentabschnitte. Das Erzwingen eines Seitenteils, nur ein helles oder dunkles Farbschema zu verwenden, kann durch das Setzen der color-scheme Eigenschaft auf light oder dark erfolgen.

Hinweis: Im Allgemeinen sollte dies nicht gemacht werden, wir verwenden es hier zu Demonstrationszwecken. Wenn der Benutzer eine Präferenz getroffen hat, sollten Sie im Allgemeinen nicht deren Präferenzen ü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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
light-dark()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch