`light-dark()` CSS-Funktion

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 eine Farbe oder ein Bild basierend auf dem aktiven Farbschema zurück, ohne dass ein prefers-color-scheme Medienmerkmal erforderlich ist.

Syntax

css

/* 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, der verwendet wird, wenn das color-scheme light ist oder keine Präferenz festgelegt ist.

<color> (dunkel)

Der <color>-Wert, der verwendet wird, wenn das color-scheme dark ist.
Akzeptiert zwei <image>-Werte:

<image> (hell)

Der <image>-Wert, der verwendet wird, wenn das color-scheme light ist oder keine Präferenz festgelegt ist.

<image> (dunkel)

Der <image>-Wert, der verwendet wird, wenn das color-scheme dark ist.

none

Das Schlüsselwort none erzeugt ein vollständig transparentes Bild ohne natürliche Größe.

Beschreibung

Benutzer können ihre Farbschema-Präferenz über ihre Betriebssystemeinstellungen (z.B. heller oder dunkler Modus) oder ihre Benutzeragenten-Einstellungen angeben. Die light-dark()-Funktion ermöglicht es, entweder zwei Farbwerte bereitzustellen, bei denen jeder <color>-Wert akzeptiert wird, oder zwei Bildwerte, bei denen jeder <image>-Wert akzeptiert wird. Die light-dark()-Funktion gibt den ersten Wert zurück, wenn das verwendete Farbschema light ist oder keine Präferenz festgelegt ist, und den zweiten Wert, wenn das verwendete Farbschema dark ist.

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

css

: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

Festlegen von Farben basierend auf einem Farbschema

Standardmäßig hängt die von der light-dark()-Farbfunktion zurückgegebene Farbe in unterstützenden Browsern von der Benutzerpräferenz ab, die über die Einstellungen des Betriebssystems (z.B. heller oder dunkler Modus) oder über die Einstellung des Benutzeragenten festgelegt ist. 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 dem vom Benutzer bevorzugten Farbschema ausgewählten Farben anzusprechen.

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 ein. Wir definieren auch color-scheme für das Dokument auf der :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. Einen Seitenabschnitt zu zwingen, 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 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;
}

section {
  padding: 0.8rem;
}

Ergebnis

Festlegen eines Verlaufs-Hintergrunds basierend auf einem Farbschema

Dieses Beispiel verwendet denselben HTML-Code wie das vorherige Beispiel, beinhaltet jedoch ein <div> anstelle eines <p>.

<h1><code>light-dark()</code> CSS function with images</h1>
<p class="supports">
  Your browser does not support <code>light-dark()</code> with images.
</p>
<div class="wrapper">
  <section>
    <h2>Automatic</h2>
    <div></div>
  </section>
  <section class="light">
    <h2>Light</h2>
    <div></div>
  </section>
  <section class="dark">
    <h2>Dark</h2>
    <div></div>
  </section>
</div>

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));
}
.wrapper {
  display: flex;
  justify-content: space-around;
  padding: 0.8rem;
}
.light {
  /* forces light color-scheme */
  color-scheme: light;
}
.dark {
  /* forces dark color-scheme */
  color-scheme: dark;
}
section {
  width: 25%;
  padding: 5px;
  color: light-dark(
    var(--light-code),
    var(--dark-code)
  );
  border: 2px solid light-dark(var(--light-code), var(--dark-code));
}
@supports (background-image: light-dark(url("light.png"), url("dark.png"))) {
  .supports {display:none;}
}

Zuerst definieren wir helle und dunkle linear-gradient()-Werte als benutzerdefinierte Eigenschaften.

css

: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));
}

section div {
  width: 80%;
  aspect-ratio: 1/1;
  margin: auto;
  border: 1px solid light-dark(var(--light-code), var(--dark-code));
}
@supports not (
  background-image: light-dark(url("light.png"), url("dark.png"))
) {
  section div {
    width: 60%;
  }
}

Dann verwenden wir die benutzerdefinierten Eigenschaften mit light-dark(), um die background-image-Eigenschaft basierend auf dem aktiven Farbschema festzulegen.

css

section div {
  background-image: light-dark(
    var(--light-grad),
    var(--dark-grad)
  );
}

Ergebnis

Spezifikationen

Spezifikation
CSS Color Module Level 5 # light-dark

Browser-Kompatibilität

Siehe auch

color-scheme
<color>
<image>
CSS-Farben Modul
prefers-contrast @media Merkmal
contrast()
WCAG: Farbkontrast
CSS benutzerdefinierte Eigenschaften und var()

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

light-dark() CSS-Funktion

HTML

CSS

Ergebnis

CSS

Ergebnis

Help improve MDN

`light-dark()` CSS-Funktion