ThemaWisselaar Logo ThemaWisselaar Contact
Contact
6 min leestijd Beginner April 2026

CSS Custom Properties: De Basis Uitgelegd

Stap-voor-stap gids om variabelen in te stellen die je thema’s flexibel en onderhoudbaar maken. Ideaal voor beginners.

Code editor met CSS custom properties getoond in donker thema op desktop monitor

Waarom CSS Custom Properties?

Voordat je aan dark mode gaat werken, moet je snappen hoe CSS custom properties (ook wel CSS variabelen genoemd) precies werken. Ze zijn de basis van flexibele thema’s. In plaats van hardcoded kleuren overal in je CSS te zetten, definieer je ze één keer als variabelen.

Het voordeel? Je wijzigt één variabele en alle elementen die ervan afhangen, worden automatisch bijgewerkt. Geen gedoe met zoeken-en-vervangen meer. Plus, je kan eenvoudig van thema wisselen zonder je hele stylesheet te herschrijven.

Programmacode met CSS variabelen en thema schakelaars zichtbaar in editor
Developer aan laptop werkend aan CSS custom properties implementatie in moderne IDE

Wat Zijn CSS Custom Properties?

Custom properties zijn variabelen in CSS. Ze beginnen altijd met twee koppeltekens (–) en je kan ze elke naam geven die je wilt. Je definieert ze meestal in :root zodat ze overal beschikbaar zijn.

Het klassieke voorbeeld? Stel je hebt een merkkleur. In plaats van #ec4899 twintig keer in je CSS te gebruiken, maak je een variabele –brand-color: #ec4899. Dan gebruik je var(–brand-color) overal. Gemakkelijk, toch?

Je kan ze overal gebruiken: in background-color, color, border-color, font-size — vrijwel elke CSS eigenschap accepteert custom properties. Ze worden ook inheritance respecteren, dus als je een variabele wijzigt op een bepaald element, erven alle kindelementen die wijziging.

De Basis Syntaxis

Je definieert custom properties in CSS door ze in een selector te plaatsen. Het eenvoudigste? De :root selector. Dat is het html-element en bereikt alles op je pagina.

Definitie in :root: 

:root {
    --primary-color: #ec4899;
    --bg-dark: #0a0515;
    --text-light: #fce7f3;
}

Nu je ze gedefinieerd hebt, gebruik je ze met var(). Heel simpel:

Gebruik van variabelen: 

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
}

button {
    background-color: var(--primary-color);
}

Dat is het. Je hebt nu de basis onder de knie. Maar er’s meer — je kan variabelen ook overschrijven per element of op basis van media queries. Dat wordt interessant voor dark mode.

Keyboard en notitieboekje met CSS custom properties schema op bureau met monitor op achtergrond
Twee monitoren naast elkaar met light mode en dark mode versies van website

Praktische Toepassing voor Thema’s

Hier’s waar het echt nuttig wordt. Je kan dezelfde variabelen voor light en dark mode gebruiken door ze eenvoudig te overschrijven. Stel je voor: je hebt één stylesheet, maar je kleuren passen zich automatisch aan.

Je definieert de standaard (light) in :root, en dan maak je een nieuwe regel voor dark mode via media query of een data-attribute. Hiermee kan je thema’s letterlijk met één lijn code omschakelen.

Light & Dark Setup: 

:root {
    --bg-primary: #ffffff;
    --text-primary: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0a0515;
        --text-primary: #fce7f3;
    }
}

Alles wat je daarna doet, blijft hetzelfde. Je CSS hoeft niet te veranderen — de variabelen regelen het allemaal. Dit is eigenlijk waar dark mode eenvoudig wordt.

Tips voor Beginners

Naamgeving is Belangrijk

Kies duidelijke namen voor je variabelen. –primary-color is beter dan –pc. Als je team groeit, zullen ze het je dankbaar zijn.

Groepeer Verwante Variabelen

Zet al je kleurvariabelen bij elkaar, dan je spacing, dan je typography. Dit maakt je :root overzichtelijk en makkelijk om bij te werken.

Test in Beide Thema’s

Zorg dat je controle genoeg is. Wit op zwart is goed, maar zwart op donker grijs? Onleesbaar. Test alles voordat je live gaat.

Fallback Waarden

Je kan fallbacks gebruiken: var(–color, blue). Als de variabele niet bestaat, gebruikt het blauw. Handig voor compatibiliteit met oudere browsers.

Inheritance Uitbuiten

Custom properties erven door. Definieer ze hogerop in je DOM en alles eronder krijgt ze automatisch. Minder herhaalde code.

Responsive Variabelen

Je kan variabelen ook in media queries wijzigen. Grotere font-size op desktop? Wijzig –font-size in je desktop media query.

Je Bent Klaar om Te Beginnen

CSS custom properties zijn niet ingewikkeld. Ze zijn een manier om je CSS netter en flexibeler te maken. Met de basis die je nu hebt, kan je al veel bereiken.

Het echte voordeel komt als je ze combineert met media queries en data-attributen voor theme switching. Dan heb je volledige controle over je design, zonder je CSS te herschrijven. Dat’s waar dark mode echt easy wordt.

Volgende stap? Probeer je eigen variabelen systeem op te zetten. Start klein — definieer je primaire kleuren, backgrounds en text colors. Dan bouw je erop voort.

Disclaimer

Dit artikel is bedoeld als educatief materiaal over CSS custom properties en dark mode implementatie. De voorbeelden en technieken zijn algemene richtlijnen. Jouw specifieke project kan andere vereisten hebben. We raden aan de officiële CSS-documentatie en WCAG richtlijnen te raadplegen voor de nieuwste standaarden en best practices. Dit artikel vervangt geen professioneel advies van een ervaren webontwikkelaar.