CSS-variabelen voor thematisering
Declareer custom properties met --, gebruik var(), overschrijf ze in geneste scopes en implementeer een schakelaar voor een licht en donker thema.
CSS-variabelen voor thematisering is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat zijn aangepaste CSS-eigenschappen?
Aangepaste CSS-eigenschappen (CSS-variabelen) slaan waarden op die je in een heel stijlblad opnieuw kunt gebruiken. Je declareert ze met --name: value en gebruikt ze met var(--name). In tegenstelling tot variabelen van preprocessors (Sass) zijn ze dynamisch: je kunt ze met JavaScript bijwerken.
Aangepaste eigenschappen declareren
Declareer eigenschappen op :root om ze overal beschikbaar te maken. Je kunt ze ook op elk element declareren om hun bereik te beperken tot de onderliggende elementenstructuur van dat element.
:root {
--color-primary: #3182ce;
--color-bg: #f7fafc;
--color-text: #1a202c;
--spacing-md: 16px;
--border-radius: 8px;
--font-sans: 'Inter', system-ui, sans-serif;
}Aangepaste eigenschappen gebruiken
Verwijs naar een variabele met var(--name). Voeg als tweede argument een terugvalwaarde toe: var(--color-primary, #3182ce). De terugvalwaarde wordt gebruikt als de variabele niet is gedefinieerd.
.card {
background: var(--color-bg);
color: var(--color-text);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
.btn {
background: var(--color-primary, blue); /* fallback */
}De cascade: variabelen met een beperkt bereik
Aangepaste eigenschappen volgen de cascade en worden overgeërfd. Als je een variabele op een onderliggend element opnieuw definieert, overschrijft die de waarde van het bovenliggende element voor dat element en al zijn afstammelingen.
:root { --accent: blue; }
.card { color: var(--accent); } /* blue */
.special-section {
--accent: green; /* override for this subtree */
}
.special-section .card { color: var(--accent); } /* green */Donkere modus met CSS-variabelen
De duidelijkste aanpak voor een donkere modus is om lichte en donkere kleurenpaletten als CSS-variabelen te definiëren. Schakel een klasse om of gebruik de mediaquery prefers-color-scheme om te wisselen. Je hoeft afzonderlijke kleureigenschappen niet te overschrijven.
:root {
--bg: #ffffff;
--text: #1a202c;
--card-bg: #f7fafc;
}
[data-theme='dark'], @media (prefers-color-scheme: dark) {
:root {
--bg: #1a202c;
--text: #f7fafc;
--card-bg: #2d3748;
}
}
body { background: var(--bg); color: var(--text); }Donkere modus omschakelen met JavaScript
Voeg een schakelknop toe die een data-attribuut of klasse op het hoofdelement wisselt. De CSS-variabelen doen de rest — één regel JavaScript, zonder afzonderlijke stijlen te hoeven overschrijven.
const btn = document.querySelector('#theme-toggle');
btn.addEventListener('click', () => {
const current = document.documentElement.getAttribute('data-theme');
document.documentElement.setAttribute(
'data-theme',
current === 'dark' ? 'light' : 'dark'
);
});Variabelen bijwerken met JavaScript
element.style.setProperty('--name', value) werkt een aangepaste eigenschap inline bij. Door deze met removeProperty te verwijderen, herstel je de waarde uit de cascade. Hiermee kun je dynamische thema's en geanimeerde waarden maken.
// Dynamically set a CSS variable from JS:
document.documentElement.style.setProperty('--primary-hue', '220');
// Based on input:
const hue = document.querySelector('#hue-slider');
hue.addEventListener('input', () => {
document.documentElement.style.setProperty('--primary-hue', hue.value);
});Ontwerptokens als CSS-variabelen
Definieer alle ontwerpbeslissingen — kleurenpalet, spatieritme en typografische schaal — als CSS-variabelen. Zo ontstaat één bron van waarheid die componenten gebruiken. Als je een token wijzigt, wordt die wijziging overal direct doorgevoerd.
:root {
/* Colour scale */
--blue-50: #ebf8ff;
--blue-100: #bee3f8;
--blue-500: #3182ce;
--blue-900: #1a365d;
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Variabelen gebruiken in calc()
CSS-variabelen werken binnen calc(), zodat je responsieve berekeningen kunt uitvoeren op basis van tokenwaarden.
:root { --header-height: 64px; }
.content {
/* Leave room for fixed header */
padding-top: calc(var(--header-height) + 24px);
min-height: calc(100vh - var(--header-height));
}Browserondersteuning
Aangepaste CSS-eigenschappen worden ondersteund in alle moderne browsers (sinds 2016 in de belangrijkste browsers). Voor deze functie heb je geen preprocessor nodig. Voor zeer oude browsers kun je een statische waarde als fallback vóór var() opgeven.
.btn {
background: blue; /* IE fallback */
background: var(--color-primary); /* modern browsers */
}Aangepaste eigenschappen versus Sass-variabelen
Sass-variabelen worden tijdens het compileren omgezet in statische waarden. Aangepaste CSS-eigenschappen bestaan tijdens de uitvoering, zijn dynamisch, kunnen met JavaScript worden gewijzigd en vloeien door de DOM heen via de cascade. Gebruik CSS-variabelen voor thema's en Sass-variabelen voor constanten tijdens het bouwen.
Korte controle
Hoe lees en werk je een aangepaste CSS-eigenschap bij vanuit JavaScript?
Samenvatting: aangepaste CSS-eigenschappen
Declareer ze met -- op :root voor een globaal bereik. Gebruik ze met var(). Variabelen met een beperkt bereik vloeien via de cascade door naar afstammelingen. Donkere modus: definieer kleurentokens opnieuw in een mediaquery of data-attribuut. Werk ze vanuit JavaScript bij met style.setProperty(). Ontwerptokens als variabelen = één bron van waarheid.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “CSS-variabelen voor thematisering” gratis?
Ja — de volledige tekst van “CSS-variabelen voor thematisering” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “CSS-variabelen voor thematisering”?
Declareer custom properties met --, gebruik var(), overschrijf ze in geneste scopes en implementeer een schakelaar voor een licht en donker thema. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “CSS-variabelen voor thematisering”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Flexbox uitgediept: uitlijning, wrapping en volgorde
- CSS Grid: template-areas auto-fit minmax
- Flexbox en Grid combineren
- CSS-variabelen voor thematisering