Kleurenschema’s ontwerpen voor donkere interfaces
Leer hoe je contrastrijke en prettige kleurencombinaties maakt die in beide modi goed functioneren.
Lees artikelCSS variabelen voor thema’s beheren
Gebruik CSS custom properties om thema’s gemakkelijk te beheren. Dit maakt je code schoon en je thema’s eenvoudig uit te breiden.
Waarom CSS variabelen essentieel zijn
Websites moeten tegenwoordig flexibel zijn. Gebruikers willen hun voorkeur bepalen — donkere modus, lichte modus, misschien zelfs een aangepaste kleurencombinatie. Zonder een goed systeem wordt dit een nachtmerrie om te beheren.
CSS custom properties (ook bekend als CSS variabelen) bieden hier de oplossing. In plaats van dezelfde kleur honderd keer in je stylesheet te hardcoden, definieer je die kleur eenmaal. Daarna? Je wijzigt die ene plek, en alles werkt mee.
We gaan vandaag dieper in op hoe je dit aanpakt. Je zult zien dat het veel eenvoudiger is dan je misschien dacht.
De basis: :root variabelen definiëren
Het allereerste wat je doet is je kleurenschema definiëren in :root. Dit is eigenlijk heel simpel. Je schrijft:
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-accent: #0066cc;
--color-border: #e0e0e0;
}
Dat’s het. Nu kun je deze variabelen overal in je CSS gebruiken. In plaats van `background: #ffffff;` schrijf je `background: var(–color-bg);`. Lijkt misschien omslachtig, maar wacht tot je je thema wilt veranderen.
De echte magie? Je kunt deze variabelen overschrijven in andere selectors. Bijvoorbeeld voor donkere modus:
Donkere modus implementeren
Hier gaat het grappig worden. Je detecteert wanneer iemand donkere modus wil, en je past je variabelen aan. Dit doe je met een media query:
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1a1a1a;
--color-text: #ffffff;
--color-accent: #4da6ff;
--color-border: #333333;
}
}
Dat’s alles wat je nodig hebt. Alle elementen die `var(–color-bg)` gebruiken, worden automatisch donker. Geen ingewikkelde JavaScript, geen lastige class toggles — pure CSS.
Maar je kunt nog verder gaan. Wat als je gebruikers handmatig hun voorkeur willen instellen? Dan voeg je een class toe:
Handmatige themakeuze toestaan
Veel websites bieden een knop waarmee gebruikers zelf hun thema kiezen. Dat werkt prima met variabelen. Je voegt een class toe aan je ` ` element:
html.dark-theme {
--color-bg: #1a1a1a;
--color-text: #ffffff;
--color-accent: #4da6ff;
--color-border: #333333;
}
Nu hoef je alleen JavaScript te gebruiken om die class toe te voegen of te verwijderen. En dat kan in amper 5 regels:
const toggleTheme = () => {
document.documentElement.classList.toggle('dark-theme');
localStorage.setItem('theme',
document.documentElement.classList.contains('dark-theme') ?
'dark' : 'light'
);
}
Dit slaat de voorkeur op in localStorage, zodat het thema onthouden blijft als de gebruiker terugkomt.
Geavanceerde patronen en best practices
Je kunt nog veel meer doen met CSS variabelen dan alleen kleuren. Denk aan spatiëring, schaduweffecten, en zelfs typografie.
Een handige techniek is cascading variabelen. Je kunt variabelen op componentniveau definiëren:
.card {
--card-bg: var(--color-bg);
--card-border: var(--color-border);
background: var(--card-bg);
border: 1px solid var(--card-border);
}
.card.featured {
--card-bg: var(--color-accent);
}
Zo kun je thema’s heel granulaar beheren. Elke component kan zijn eigen varianten hebben, en ze respecteren allemaal het globale thema.
Een ander voordeel: je kunt variabelen ook gebruiken in JavaScript. Dat geeft je enorm veel flexibiliteit:
const accentColor = getComputedStyle(document.documentElement)
.getPropertyValue('--color-accent');
Tot slot
CSS variabelen zijn niet ingewikkeld, en ze besparen je enorm veel tijd. In plaats van honderden hardgecodeerde kleuren te wijzigen, pas je een handvol variabelen aan — klaar. Je code wordt schoner, je thema’s worden flexibeler, en je gebruikers krijgen de voorkeur die ze willen.
Het mooie is dat dit geen raketwetenschap is. Je hebt geen complexe frameworks nodig, geen ingewikkelde build-stappen. Gewoon goede, oude CSS die al jaren in alle browsers wordt ondersteund.
Start vandaag nog. Definieer je :root variabelen, test met donkere modus, en voeg een thema-schakelaar toe. Je zult verbaasd zijn hoe makkelijk het gaat.
Meer over thema’s beheren?
Ontdek hoe je kleurenschema’s ontwerpt die goed werken in beide modi, en hoe je ervoor zorgt dat alles toegankelijk blijft.
Bekijk meer artikelenGerelateerde artikelen
Over dit artikel
Dit artikel is informatief en bedoeld om je te helpen CSS variabelen en thema-implementatie beter te begrijpen. De technieken en codevoorbeelden zijn gebaseerd op webstandaarden en best practices. Je omstandigheden kunnen afwijken, dus test altijd goed in je eigen projecten. We raden aan om ook de officiële CSS-documentatie te raadplegen voor de meest actuele informatie.