light-dark()
Baseline
2024
Neu verfügbar
Seit May 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die light-dark() CSS Funktion akzeptiert zwei Farben oder zwei Bilder und gibt basierend auf dem aktiven Farbschema eine Farbe oder ein Bild zurück, ohne ein prefers-color-scheme Medienmerkmal zu benötigen.
Syntax
/* Named color values */
light-dark(
black,
white
);
/* RGB color values */
light-dark(
rgb(0 0 0),
rgb(255 255 255)
);
/* image url values */
light-dark(
url("light-icon.png"),
url("dark-icon.png")
);
/* linear-gradient values */
light-dark(
linear-gradient(135deg, ghostwhite 20%, tomato),
linear-gradient(45deg, darkslategray 20%, gold)
);
/* Custom properties */
light-dark(
var(--light),
var(--dark)
);
Werte
Die light-dark()-Funktion hat zwei Formen:
- Akzeptiert zwei
<color>Werte:<color>(hell)-
Der
<color>-Wert wird verwendet, wenn dascolor-schemelightist oder keine Präferenz gesetzt ist. <color>(dunkel)-
Der
<color>-Wert wird verwendet, wenn dascolor-schemedarkist.
- Akzeptiert zwei
<image>Werte:<image>(hell)-
Der
<image>-Wert wird verwendet, wenn dascolor-schemelightist oder keine Präferenz gesetzt ist. <image>(dunkel)-
Der
<image>-Wert wird verwendet, wenn dascolor-schemedarkist. none-
Das
none-Schlüsselwort erzeugt ein vollständig transparentes Bild ohne natürliche Größe.
Beschreibung
Benutzer können ihre Farbschema-Präferenz über ihre Betriebssystemeinstellungen (z. B. hell oder dunkel Modus) oder ihre Benutzeragenten-Einstellungen angeben. Die light-dark() Funktion ermöglicht es, entweder zwei Farbwerte, wobei jeder <color>-Wert akzeptiert wird, oder zwei Bildwerte, wobei jeder <image>-Wert akzeptiert wird, bereitzustellen. Die light-dark() Funktion gibt den ersten Wert zurück, wenn das verwendete Farbschema light ist oder keine Präferenz gesetzt ist, und den zweiten Wert, wenn das verwendete Farbschema dark ist.
Um die Unterstützung für die light-dark()-Farb-Funktion zu aktivieren, muss das color-scheme den Wert light dark haben, normalerweise auf der :root Pseudoklasse gesetzt.
:root {
color-scheme: light dark;
}
body {
color: light-dark(#333b3c, #efefec);
background-color: light-dark(#efedea, #223a2c);
}
Formale Syntax
<light-dark()> =
<light-dark-color> |
<light-dark-image>
<light-dark-color> =
light-dark( <color> , <color> )
<light-dark-image> =
light-dark( [ <image> | none ] , [ <image> | none ] )
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Beispiele
Farben basierend auf einem Farbschema setzen
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 eines Betriebssystems (z. B. hell oder dunkel Modus) oder von einer Benutzeragenten-Einstellung festgelegt wurde. Sie können diese Einstellung auch in den Entwicklerwerkzeuge des Browsers ändern.
HTML
Wir fügen drei Abschnitte hinzu, um helle Farben, dunkle Farben und die Farben anzusteuern, die basierend auf dem bevorzugten Farbschema des Benutzers ausgewählt wurden.
<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.
: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 Farbschema eines Benutzers für Dokumentabschnitte zu überschreiben. Um einen Seitenteil nur ein helles oder dunkles Farbschema verwenden zu lassen, kann die color-scheme-Eigenschaft auf light oder dark gesetzt werden.
Hinweis: Dies sollte im Allgemeinen nicht getan werden, wir verwenden es hier zu Demonstrationszwecken. Wenn der Benutzer eine Präferenz festgelegt hat, sollten Sie diese im Allgemeinen nicht überschreiben.
.light {
/* forces light color-scheme */
color-scheme: light;
}
.dark {
/* forces dark color-scheme */
color-scheme: dark;
}
Ergebnis
Verlaufs-Hintergrund basierend auf einem Farbschema setzen
Dieses Beispiel verwendet denselben HTML-Code wie das vorherige Beispiel, aber mit einem <div> anstelle eines <p>.
CSS
Zuerst definieren wir helle und dunkle linear-gradient()-Werte als benutzerdefinierte Eigenschaften.
:root {
/* light dark gradients */
--light-grad: linear-gradient(135deg, var(--light-bg) 20%, var(--light-code));
--dark-grad: linear-gradient(45deg, var(--dark-bg) 30%, var(--dark-code));
}
Dann verwenden wir die benutzerdefinierten Eigenschaften mit light-dark(), um die background-image-Eigenschaft basierend auf dem aktiven Farbschema festzulegen.
section div {
background-image: light-dark(
var(--light-grad),
var(--dark-grad)
);
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Color Module Level 5 # light-dark |