21 augustus 2025Nederlands

Implementeer naadloos lichte en donkere themawisselingen op uw website met CSS's `prefers-color-scheme` media query en custom properties.

CSS Light-Dark Functie: Automatisch Thema Wisselen voor een Wereldwijd Publiek

In de huidige webomgeving is het inspelen op gebruikersvoorkeuren van het grootste belang. Een belangrijk aspect hiervan is het aanbieden van de mogelijkheid om te wisselen tussen lichte en donkere thema's. Dit gaat niet alleen over esthetiek; het gaat over toegankelijkheid en het verminderen van oogvermoeidheid, vooral voor gebruikers in verschillende tijdzones of werkend onder variërende lichtomstandigheden. De CSS `prefers-color-scheme` media query biedt een schone en efficiënte manier om automatisch het thema van uw website aan te passen op basis van de systeemvoorkeuren van de gebruiker. Dit artikel begeleidt u bij het implementeren van deze functie voor een wereldwijd publiek, wat zorgt voor een naadloze en gebruiksvriendelijke ervaring.

Waarom Light/Dark Thema Wisselen Implementeren?

Het aanbieden van zowel lichte als donkere thema's biedt verschillende belangrijke voordelen:

Verbeterde Gebruikerservaring: Veel gebruikers vinden de donkere modus gemakkelijker voor de ogen, vooral in omgevingen met weinig licht. Omgekeerd kan de lichte modus de voorkeur hebben in fel verlichte ruimtes. Het bieden van de keuze verhoogt de gebruikerstevredenheid.
Toegankelijkheid: Gebruikers met visuele beperkingen vinden mogelijk het ene thema toegankelijker dan het andere. Hen de keuze geven verbetert de inclusiviteit.
Verminderde Oogvermoeidheid: De donkere modus kan oogvermoeidheid verminderen, vooral voor gebruikers die lange uren voor schermen doorbrengen. Dit is met name relevant voor gebruikers in verschillende tijdzones die laat op de avond werken.
Batterijduur (OLED-schermen): Op apparaten met OLED-schermen kan het gebruik van de donkere modus de batterijduur aanzienlijk verlengen.
Moderne Ontwerptrend: De donkere modus is een populaire ontwerptrend en het aanbieden ervan toont aan dat uw website up-to-date is en rekening houdt met gebruikersvoorkeuren.

Begrip van `prefers-color-scheme`

De `prefers-color-scheme` media query stelt uw website in staat om de voorkeurskleurenschema-instelling van de gebruiker in hun besturingssysteem of browser te detecteren. Het kan drie mogelijke waarden hebben:

`light`: Geeft aan dat de gebruiker een licht thema heeft aangevraagd.
`dark`: Geeft aan dat de gebruiker een donker thema heeft aangevraagd.
`no-preference`: Geeft aan dat de gebruiker geen voorkeur heeft uitgesproken. Dit is de standaardwaarde als de gebruiker niet expliciet een licht of donker thema heeft gekozen.

U kunt deze media query in uw CSS gebruiken om verschillende stijlen toe te passen op basis van de voorkeur van de gebruiker.

Implementatiestappen: Een Praktische Gids

Hier is een stapsgewijze handleiding voor het implementeren van automatisch wisselen van lichte en donkere thema's met CSS:

1. Definieer CSS Custom Properties (Variabelen)

De sleutel tot een soepele overgang ligt in het gebruik van CSS custom properties (ook bekend als CSS variabelen). Definieer variabelen voor kleuren, achtergronden en andere stijlkenmerken die u wilt wijzigen op basis van het thema.

Voorbeeld:

            
:root {
  --background-color: #ffffff; /* Achtergrond lichte modus */
  --text-color: #000000; /* Tekst lichte modus */
  --link-color: #007bff; /* Linkkleur lichte modus */
}

Deze code definieert drie custom properties: `--background-color`, `--text-color` en `--link-color`. Deze eigenschappen zijn initieel ingesteld op waarden die geschikt zijn voor een licht thema.

2. Gebruik Custom Properties in Uw Stijlen

Pas deze custom properties toe in uw CSS om uw website-elementen te stylen.

Voorbeeld:

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

a {
  color: var(--link-color);
}

Deze code stelt de `background-color` van het `body`-element in op de waarde van de `--background-color` custom property, de `color` van het `body`-element op de waarde van de `--text-color` custom property, en de `color` van het `a` (link) element op de waarde van de `--link-color` custom property.

3. Implementeer de `prefers-color-scheme` Media Query

Gebruik nu de `prefers-color-scheme` media query om de custom properties voor het donkere thema opnieuw te definiëren.

Voorbeeld:

            
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Achtergrond donkere modus */
    --text-color: #ffffff; /* Tekst donkere modus */
    --link-color: #66b3ff; /* Linkkleur donkere modus */
  }
}

Deze code definieert een media query die de stijlen binnen de accolades alleen toepast als de systeemvoorkeur van de gebruiker is ingesteld op donkere modus. Binnen de media query worden de custom properties opnieuw gedefinieerd met waarden die geschikt zijn voor een donker thema.

4. Omgaan met `no-preference`

Hoewel niet strikt noodzakelijk, kunt u het `no-preference` geval expliciet afhandelen als u een specifiek standaardthema wilt garanderen. Als er geen voorkeur is geselecteerd in het besturingssysteem, zullen browsers doorgaans standaard naar licht gaan. Expliciet zijn garandeert echter dat de site op verschillende browsers op dezelfde manier wordt weergegeven.

Voorbeeld:

            
@media (prefers-color-scheme: no-preference) {
  :root {
    --background-color: #f0f0f0; /* Standaard achtergrond (lichtgrijs) */
    --text-color: #333333; /* Standaard tekst (donkergrijs) */
  }
}

In dit voorbeeld stellen we een lichtgrijze achtergrond en donkergrijze tekst in voor gebruikers die geen thema hebben geselecteerd.

Compleet Voorbeeld

Hier is een compleet voorbeeld waarin alle stappen worden gecombineerd:

            
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
  --header-background-color: #f8f9fa;
  --header-text-color: #212529;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

header {
  background-color: var(--header-background-color);
  color: var(--header-text-color);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

h1, h2, h3 {
  margin-top: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
    --link-color: #66b3ff;
    --header-background-color: #212529;
    --header-text-color: #f8f9fa;
  }
}

Verder Gaan: Een Handmatige Schakelaar Toevoegen

Hoewel automatisch thema wisselen handig is, geven sommige gebruikers er de voorkeur aan om handmatig hun thema te kiezen. U kunt een schakelaarknop aan uw website toevoegen waarmee gebruikers de systeemvoorkeur kunnen negeren.

1. HTML-Structuur

Voeg een knop of selectievak toe aan uw HTML om te fungeren als de thema-schakelaar.

2. JavaScript Logica

Gebruik JavaScript om klikken op de schakelaar te detecteren en een CSS-klasse toe te voegen aan het `body`-element (of een ander geschikt ouder-element). Sla de voorkeur van de gebruiker op in `localStorage` om deze tussen sessies te behouden.

            
const themeToggle = document.getElementById('theme-toggle');
const body = document.body; // of document.documentElement
const localStorageKey = 'theme';

// Functie om het thema in te stellen
function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
  } else {
    body.classList.remove('dark-theme');
  }
  localStorage.setItem(localStorageKey, theme);
}

// Functie om het opgeslagen thema op te halen
function getStoredTheme() {
  return localStorage.getItem(localStorageKey) || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
}

// Stel het initiële thema in
const initialTheme = getStoredTheme();
setTheme(initialTheme);

// Schakel het thema in bij het klikken op de knop
themeToggle.addEventListener('click', () => {
  const currentTheme = body.classList.contains('dark-theme') ? 'light' : 'dark';
  setTheme(currentTheme);
});

// Luister naar wijzigingen in systeemvoorkeuren
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
    if(localStorage.getItem(localStorageKey) === null) {
        const newColorScheme = event.matches ? "dark" : "light";
        setTheme(newColorScheme)
    }
});

3. CSS Styling

Wijzig uw CSS om de donkere thema stijlen toe te passen op basis van de `dark-theme` klasse.

            
.dark-theme {
  --background-color: #121212;
  --text-color: #ffffff;
  --link-color: #66b3ff;
  --header-background-color: #212529;
  --header-text-color: #f8f9fa;
}

Deze aanpak stelt gebruikers in staat om handmatig thema's te wisselen, waarbij de systeemvoorkeur wordt genegeerd. De `localStorage` zorgt ervoor dat de keuze van de gebruiker wordt onthouden tussen sessies. De event listener zorgt ervoor dat als de gebruiker GEEN thema handmatig heeft geselecteerd, maar de systeemvoorkeur verandert, de site hierop zal reageren.

Best Practices voor een Wereldwijd Publiek

Houd bij het implementeren van thema wisselen tussen licht en donker voor een wereldwijd publiek rekening met deze best practices:

Toegankelijkheid: Zorg ervoor dat beide thema's voldoen aan toegankelijkheidsrichtlijnen (WCAG). Besteed aandacht aan kleurcontrast en leesbaarheid. Hulpmiddelen zoals de WebAIM Color Contrast Checker (https://webaim.org/resources/contrastchecker/) kunnen nuttig zijn.
Gebruikerstesten: Test uw thema's met gebruikers uit verschillende regio's en culturen om feedback te verzamelen over hun voorkeuren en om eventuele problemen te identificeren.
Prestaties: Optimaliseer uw CSS om de impact op de laadtijd van pagina's te minimaliseren. Vermijd complexe selectoren en onnodige stijlen.
Consistente Vormgeving: Behoud een consistente ontwerp esthetiek in beide thema's. Vermijd storende overgangen of elementen die in het ene of het andere thema misplaatst lijken.
Lokalisatie: Als uw website gelokaliseerd is, zorg er dan voor dat het thema wisselen mechanisme ook gelokaliseerd is. De tekst op de thema schakelknop moet bijvoorbeeld vertaald zijn naar de taal van de gebruiker.

Geavanceerde Overwegingen

Animaties en Overgangen: Gebruik subtiele animaties en overgangen om het thema wisselen proces soepeler en visueel aantrekkelijker te maken. Gebruik de `transition` eigenschap in CSS.
Afbeeldingen en Iconen: Overweeg het gebruik van verschillende versies van afbeeldingen en iconen voor lichte en donkere thema's. SVG-afbeeldingen zijn hier bijzonder geschikt voor, aangezien hun kleuren gemakkelijk kunnen worden aangepast met CSS.
Externe Bibliotheken: Er zijn verschillende JavaScript bibliotheken en frameworks die de implementatie van thema wisselen vereenvoudigen. Houd echter rekening met hun afhankelijkheden en potentiële impact op de prestaties.
Server-Side Rendering (SSR): Als u SSR gebruikt, zorg er dan voor dat het thema correct op de server wordt gerenderd. Dit kan vereisen dat de thema voorkeur van de gebruiker van de client naar de server wordt doorgegeven.
Component-Gebaseerde Architecturen: Voor Single Page Applications (SPA's) of websites gebouwd met component-gebaseerde architecturen zoals React, Vue of Angular, pas thema klassen of custom properties op component niveau toe voor meer gedetailleerde controle.

Conclusie

Het implementeren van thema wisselen tussen licht en donker is een waardevolle investering in gebruikerservaring en toegankelijkheid. Door gebruik te maken van CSS's `prefers-color-scheme` media query en custom properties, kunt u een naadloze en gebruiksvriendelijke ervaring creëren voor een wereldwijd publiek. Vergeet niet toegankelijkheid, gebruikerstesten en prestatieoptimalisatie te overwegen om ervoor te zorgen dat uw implementatie effectief en inclusief is. Het toevoegen van een handmatige overschrijving geeft gebruikers volledige controle. Door de best practices in dit artikel te volgen, kunt u een website creëren die zowel visueel aantrekkelijk als toegankelijk is voor alle gebruikers, ongeacht hun voorkeuren of omgeving.