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 – eine der beiden Farboptionen 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 dass die Themenfarben in eine Abfrage der prefers-color-scheme
Media-Feature eingeschlossen werden müssen. Benutzer können ihre Farbschema-Präferenz über die Einstellungen ihres Betriebssystems angeben (z. B. Licht- oder Dunkelmodus) oder über die Einstellungen ihres Benutzeragenten. Die light-dark()
-Funktion ermöglicht es, zwei Farbwerte bereitzustellen, wobei jeder <color>
-Wert akzeptiert wird. Die light-dark()
CSS-Farbfunktion gibt den ersten Wert zurück, wenn die Benutzerpräferenz auf light
gesetzt ist oder keine Präferenz gesetzt ist, und den zweiten Wert, wenn die Benutzerpräferenz auf dark
gesetzt ist.
Um Unterstützung für die light-dark()
-Farbfunktion zu ermöglichen, muss die color-scheme
den Wert light dark
haben, üblicherweise auf der :root
Pseudoklasse gesetzt.
: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
Funktionale Notation: light-dark(light-color, dark-color)
light-color
-
<color>
-Wert, der für das hellecolor-scheme
festgelegt werden soll. dark-color
-
<color>
-Wert, der für das dunklecolor-scheme
festgelegt werden soll.
Formale Syntax
Beispiel
Farben abhängig vom Farbschema einstellen
Standardmäßig hängt in unterstützten Browsern die von der light-dark()
-Farbfunktion zurückgegebene Farbe von der Benutzerpräferenz ab, die über die Einstellungen des Betriebssystems festgelegt wurde (z. B. Licht- oder Dunkelmodus) oder von einer Benutzereinstellung im Browser. 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 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 ein. Wir definieren auch color-scheme
für das Dokument im :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));
}
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, wir verwenden es hier zu Demonstrationszwecken. Wenn der Benutzer eine Präferenz festgelegt hat, sollten Sie deren Präferenzen im Allgemeinen 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
BCD tables only load in the browser