CSS-variabelen voor themawisseling

CSS-aangepaste eigenschappen (variabelen) die op :root zijn gedefinieerd, zijn overal in het stylesheet beschikbaar. Je definieert één keer een volledig kleurenpalet — achtergronden, tekstkleuren, oppervlakken en randen — en verwijst er overal naar. Deze ene bron van waarheid maakt het wisselen van thema's eenvoudig.

Wanneer een attribuut data-theme="dark" op document.documentElement is ingesteld, overschrijft een CSS-selector zoals [data-theme='dark'] de hoofdvariabelen met donkere waarden. Componenten verwijzen naar var(--color-bg) en nemen automatisch de nieuwe waarden over zonder codewijzigingen.

Definieer minimaal: --color-bg (achtergrond van de pagina), --color-text (primaire tekst), --color-primary (merkkleur), --color-surface (achtergrond van kaarten of panelen) en --color-border (scheidingslijnen). Een consistente set tokens voorkomt dat er losse kleurwaarden in componenten verschijnen.

Verwijs in de CSS van je component naar variabelen zoals background: var(--color-bg) en color: var(--color-text). Je kunt ook een terugvalwaarde opgeven: var(--color-bg, #ffffff). De browser bepaalt de variabele tijdens het tekenen, zodat één klasse voor zowel lichte als donkere thema's werkt.

Voeg transition: background-color 200ms, color 200ms toe aan de selector :root. Wanneer het attribuut data-theme verandert, animeren alle elementen die CSS-variabelen gebruiken gelijktijdig naar hun nieuwe waarden. Dit zorgt voor een verzorgde uitstraling zonder JavaScript-animatiecode.

Themabeheer via CSS-variabelen is beter dan het instellen van inline-stijlen vanuit JavaScript. De browser handelt alle stijlherberekeningen zelf af, er worden geen extra React-renders veroorzaakt voor elk afzonderlijk thematisch kindcomponent en de CSS-cascade regelt overerving automatisch. JS hoeft alleen één attribuut op het hoofdelement te wisselen.

Je kunt CSS-variabelen combineren met de query @media (prefers-color-scheme: dark) als terugvaloptie die alleen CSS gebruikt. Definieer je donkere overschrijvingen naast of in plaats van de selector data-theme in de mediaquery. Zo werkt de donkere modus ook als JavaScript nog niet is uitgevoerd.

De meest robuuste aanpak combineert beide mechanismen: de @media-query levert de standaardwaarde van het besturingssysteem, terwijl een attribuut data-theme via JavaScript een gebruikersoverschrijving mogelijk maakt. Wanneer het attribuut aanwezig is, wint het dankzij de specificiteit; wanneer het ontbreekt, treedt de mediaquery in werking.

Gebruik voor afbeeldingen die er slecht uitzien tegen donkere achtergronden het HTML-element picture met een onderliggend element source media="(prefers-color-scheme: dark)". De browser selecteert automatisch de donkere variant. Voor SVG-pictogrammen in CSS kun je filter: invert(1) gebruiken als snelle benadering.

Je kunt CSS-variabelen ook afbakenen tot afzonderlijke componenten door ze op een hoofdelement van de component te definiëren in plaats van op :root. Zo kun je thema's per component instellen, bijvoorbeeld met een zijbalk met een eigen achtergrondtoken die afwijkt van de pagina-achtergrond, terwijl alles nog steeds correct wisselt met de globale themaschakelaar.

Chrome DevTools toont opgeloste waarden van CSS-variabelen in het paneel Stijlen. Klik op de variabelverwijzing om naar de definitie te springen. Zo kun je eenvoudig controleren of voor elk element de juiste donkere of lichte token wordt toegepast. Je kunt de variabelewaarden ook direct in het paneel bewerken.

CSS-aangepaste eigenschappen op :root bieden een gecentraliseerd tokensysteem voor thema's. Wissel een attribuut data-theme op het html-element om direct van thema te veranderen. Voeg CSS-overgangen toe voor een vloeiende animatie, gebruik de mediaquery prefers-color-scheme als terugvaloptie die alleen CSS gebruikt en vermijd stijloverschrijvingen per component vanuit JS.