CSS/Funktionen/light-dark()

Die light-dark()-Funktion ermöglicht es, zwei Farben für eine Eigenschaft festzulegen - und gibt eine der beiden Farboptionen zurück, indem sie erkennt, ob der Entwickler ein helles oder dunkles Farbschema festgelegt oder der Benutzer ein helles oder dunkles Farbschema angefordert hat - ohne dass die Farben des Themas in einer prefers-color-scheme-Medienabfrage enthalten sein müssen..

Parameter	light-color: Farbangabe dark-color: Farbangabe
anwendbar auf	alle Farbangaben
Browsersupport	caniuse: mdn-css_types_color_light-dark

Beispiel

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(midnightblue, gold);
  background-color: light-dark(white, midnightblue);
}

Wenn das helle Farbschema ausgewählt ist, wird Text dunkelblau auf weißem Hintergund dargestellt. Im Dunklen Modus wird der Hinterugnd midnightBlue und die textfarbe gold.

Beachten Sie: Um die Unterstützung für die Farbfunktion light-dark() zu aktivieren, muss color-scheme den Wert light dark haben, der normalerweise in der Pseudoklasse :root festgelegt ist.

Weblinks

• CSSWG: Reacting to the used color-scheme: the light-dark() Function
• MDN: light-dark()

Siehe auch

• Dark Mode
  • color-scheme-Eigenschaft