Was ist CSS-Light-Dark-Funktions-Generator?
CSS-Light-Dark-Funktions-Generator ist ein Browser-Tool für diese Aufgabe: Generiere CSS color-scheme und light-dark()-Regeln für Dark Mode ohne doppelte Variablen. Die Ausgabe bleibt lesbar, damit du sie vor dem Einbau in eine Live-Seite prüfen kannst.
Quick answer
The light-dark() CSS function returns one of two color values based on the current color scheme, making it easy to support light and dark modes without duplicating CSS rules.
Limitations
- light-dark() only works when the color-scheme property is set on the document or element. Without it the function defaults to the first color.
- The function accepts exactly two color values -- one for light and one for dark. Complex theme switching still requires custom properties or media queries.
- Older browsers do not support light-dark(). Provide a fallback color before the light-dark() function in the property declaration.
So nutzt du dieses Tool
- Öffne das Tool und trage die relevanten Werte ein.
- Prüfe die erzeugte Ausgabe im Ergebnisfeld.
- Kopiere nur den Teil, der zu deiner Seite passt.
- Teste die Änderung im Browser, bevor du sie veröffentlichst.
Wofür du es nutzen kannst
- Wiederkehrende Publishing-Aufgaben schneller erledigen.
- Markup, CSS oder Checklisten vor einem Launch vorbereiten.
- Kleine Fehler vermeiden, die bei statischen Websites leicht übersehen werden.