CSS/Funktionen/light-dark()

Browserunterstützung
caniuse.com

Die CSS-Funktion light-dark() 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.

anwendbar auf

alle Farbangaben

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.

Siehe auch

• Dark Mode
  • color-scheme-Eigenschaft

Weblinks

• CSSWG: Reacting to the used color-scheme: the light-dark() Function
• MDN: light-dark()
• Browser-Support: caniuse.com