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 eine der beiden Farbauswahlmöglichkeiten zurückzugeben, indem erkannt wird, ob der Entwickler ein helles oder dunkles Farbschema festgelegt hat oder der Benutzer ein helles oder dunkles Farbthema angefordert hat - ohne die Themenfarben in eine Abfrage der Media-Feature prefers-color-scheme einfügen zu müssen. Benutzer können ihre Farbschema-Präferenz über ihre Betriebssystemeinstellungen (zum Beispiel, Helligkeit oder Dunkelmodus) oder ihre Benutzereinstellungen angeben. Die light-dark() Funktion erlaubt es, zwei Farbwerte bereitzustellen, wobei jeder <color> Wert akzeptiert wird. Die light-dark() CSS-Farbfunktions gibt den ersten Wert zurück, wenn die Benutzereinstellung auf light gesetzt ist oder keine Präferenz festgelegt ist, und den zweiten Wert, wenn die Benutzereinstellung auf dark gesetzt ist.
Um Unterstützung für die light-dark() Farbfunktion zu ermöglichen, muss der Wert von color-scheme light dark gesetzt sein, normalerweise auf der :root Pseudoklasse.
:root {
color-scheme: light dark;
}
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
Syntax
/* 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
Funktionelle Notation: light-dark(light-color, dark-color)
light-color-
<color>Wert, der für das hellecolor-schemefestgelegt werden soll. dark-color-
<color>Wert, der für das dunklecolor-schemefestgelegt 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() Farbfunktion zurückgegebene Farbe von der Benutzereinstellung ab, die über die Systemeinstellungen des Betriebssystems (zum Beispiel, heller oder dunkler Modus) oder über eine Benutzereinstellung festgelegt wurde. Diese Einstellung kann auch in den Entwickler-Tools des Browsers geändert werden.
HTML
Wir fügen drei Abschnitte ein, um Lichtfarben, Dunkelfarben und die basierend auf dem bevorzugten Farbschema des Benutzers ausgewählten Farben anzuvisieren.
<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 :root, um die light-dark() Farbfunktion für das gesamte Dokument zu ermöglichen.
: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 die Überschreibung eines Benutzer-Farbschemas für Dokumentabschnitte. Das Erzwingen eines Seitenabschnitts, nur ein helles oder dunkles Farbschema zu verwenden, kann durch das Einstellen der color-scheme Eigenschaft auf light oder dark geschehen.
Hinweis: Dies sollte im Allgemeinen nicht getan werden, wir verwenden es hier zu Demonstrationszwecken. Wenn der Benutzer eine Präferenz getroffen hat, sollten Sie im Allgemeinen seine Präferenzen nicht überschreiben.
.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
Loading…