Was ist CSS-Light-Dark-Funktions-Generator?
Die CSS-Funktion light-dark() nimmt zwei Farbwerte und wählt automatisch den ersten für den Hellmodus und den zweiten für den Dunkelmodus basierend auf der color-scheme-Eigenschaft. Dies macht doppelte CSS-Custom-Property-Blöcke oder einen JavaScript-Theme-Umschalter für grundlegende Dunkelmodus-Unterstützung überflüssig.
Kurze Antwort
Die CSS-Funktion light-dark() gibt einen von zwei Farbwerten basierend auf dem aktuellen Farbschema zurück und erleichtert so die Unterstützung von Hell- und Dunkelmodus ohne doppelte CSS-Regeln.
Last updated: 2026-05-25
Einschränkungen
- light-dark() funktioniert nur, wenn die color-scheme-Eigenschaft gesetzt ist. Ohne sie verwendet die Funktion standardmäßig die erste Farbe.
- Die Funktion akzeptiert genau zwei Farbwerte. Komplexes Theme-Switching erfordert weiterhin Custom Properties oder Medienabfragen.
- Ältere Browser unterstützen light-dark() nicht. Stellen Sie eine Fallback-Farbe vor der light-dark()-Funktion bereit.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
So nutzt du dieses Tool
- Wählen Sie die Farbeigenschaften, die Sie thematisieren möchten, wie Textfarbe oder Hintergrund.
- Geben Sie eine helle und eine dunkle Farbe für jede Eigenschaft ein.
- Das Tool generiert die color-scheme-Deklaration und die light-dark()-Funktionsaufrufe.
- Kopieren Sie das CSS und fügen Sie das color-scheme-meta-Tag in Ihren Seitenkopf ein.
Wofür du es nutzen kannst
- Fügen Sie einer statischen Website grundlegenden Dunkelmodus ohne JavaScript hinzu.
- Erstellen Sie helle und dunkle Farbpaare für Texte, Hintergründe und Rahmen.
- Bauen Sie ein kleines Design-Token-System mit light-dark() für thematische Konsistenz.