CSS custom properties uitgelegd met een live licht en donker thema dat alleen uit variabelen bestaat, JavaScript getPropertyValue en setProperty, @property, Tailwind v4 @theme en valkuilen.
Declareer een CSS-variabele met twee streepjes, --brand: #2563eb;, meestal binnen :root zodat de hele pagina hem ziet, en lees hem uit met var(--brand). Een tweede argument is de fallback: var(--brand, blue). Variabelen erven zoals color, dus als u er een opnieuw definieert op een sectie, verandert hij voor alles daarbinnen, en dat maakt thema's goedkoop.
Syntax in één oogopslag
Deze gids behandelt declareren, scope en fallbacks, daarna een themawisselaar waarin alleen variabelen veranderen, een tool die op deze pagina zelf variabelen uitleest en schrijft vanuit JavaScript, geregistreerde properties met @property, hoe Tailwind v4 zijn thema omzet in variabelen, en de fouten waardoor var() stilletjes faalt.
Sass-variabelen worden vervangen wanneer de stylesheet wordt gecompileerd en verdwijnen uit de uitvoer. CSS custom properties bestaan in de browser tijdens runtime, erven via de DOM, kunnen per element verschillen en kunnen na het laden van de pagina worden gewijzigd vanuit JavaScript of door een media query-regel.
Nee. var() is niet toegestaan in de voorwaarde van een @media-regel, omdat media queries worden geëvalueerd zonder element om van te erven. U kunt wel de waarde van een variabele binnen een media query-blok wijzigen, en dat is de gebruikelijke manier om tokens responsive te maken.
Controleer de spelling en hoofdletters, of de variabele op het element of een voorouder is gedefinieerd, en of de uiteindelijke waarde geldig is voor de property. Is de ingevulde waarde ongeldig, dan wordt de declaratie ongeldig op computed-value time en valt de property terug op zijn geërfde of initiële waarde, niet op uw vorige regel.
Een niet-geregistreerde variabele wordt als string behandeld, dus hij springt halverwege om in plaats van geleidelijk over te gaan. Registreer hem met @property en een syntax zoals <color> of <angle>, en de browser kan hem vloeiend interpoleren in transitions en animaties.
Custom properties en var() werken al jaren in elke grote browser. @property is nieuwer: Firefox voegde het toe in versie 128 in 2024, dus controleer caniuse als u oudere versies ondersteunt en houd een niet-geregistreerde fallback aan.
Lichte en donkere waarden
De tweede kaart definieert --accent opnieuw voor zichzelf. De derde gebruikt een variabele die niemand heeft gedefinieerd, dus de fallbackkleur verschijnt.
Eén set componentregels. Het thema is een andere set waarden, gekozen via de systeeminstelling of een data-theme-attribuut.
Lees de berekende waarde uit van elk element. Schrijf op :root voor een globale wijziging, of op één element om alleen de onderliggende boom te beïnvloeden.
Door --angle te registreren als <angle> kan de browser hem interpoleren. Zonder registratie zou het verloop verspringen in plaats van draaien.
In Tailwind v4 genereren variabelen in @theme utilities zoals bg-brand en worden ze ook uitgevoerd als echte CSS-variabelen die u met var() kunt gebruiken.
Waar mensen over struikelen
Licht en donker thema, alleen variabelen
Thema
lichte modus
donkere modus
Weekrapport
Meer bestellingen dan vorige week
voorbeeldbestellingen
Details bekijken
Het enige dat verandert
CSS kopiëren
Variabelen uitlezen en schrijven vanuit JavaScript
Het voorbeeldvak hieronder gebruikt var(--demo-accent, #2563eb) voor de rand en var(--demo-radius, 8px) voor de hoeken. Stel een van beide variabelen in en het vak verandert.
Naam van de variabele
Nieuwe waarde
De naam van een custom property begint met twee streepjes, bijvoorbeeld --demo-radius.
Uitlezen
Instellen
Verwijderen
Probeer --demo-radius
Voorbeeldvak
(niet ingesteld)
Gratis beginnen · Geen creditcard nodig