Wat is CSS Light-Dark Functie Generator?
De light-dark() CSS-functie neemt twee kleurwaarden en kiest automatisch de eerste voor lichte modus en de tweede voor donkere modus op basis van de color-scheme eigenschap. Dit elimineert de noodzaak voor dubbele CSS-variabelen of een JavaScript-themaschakelaar.
Snel antwoord
De light-dark() functie retourneert een van twee kleurwaarden op basis van het huidige kleurenschema. Hiermee ondersteunt u eenvoudig licht en donker zonder dubbele CSS-regels.
Last updated: 2026-05-25
Beperkingen
- Werkt alleen met color-scheme op het document of element.
- Accepteert precies twee kleurwaarden.
- Oudere browsers ondersteunen light-dark() niet. Zorg voor terugval.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Kies de kleureigenschappen die u wilt thematiseren.
- Voer een lichte en donkere kleur in voor elke eigenschap.
- De tool genereert de color-scheme declaratie en light-dark() aanroepen.
- Kopieer de CSS en voeg de color-scheme meta-tag toe aan de paginakop.
Waarvoor je het kunt gebruiken
- Voeg donkere modus toe aan een statische site zonder JavaScript.
- Maak licht/donker kleurparen voor tekst, achtergronden en randen.
- Bouw een klein ontwerptokensysteem met light-dark().