M

MLOG

Nederlands

Ontdek de kracht van CSS media queries en custom properties om automatische lichte en donkere thema's te creëren die zich aanpassen aan gebruikersvoorkeuren, wat de toegankelijkheid en visuele aantrekkingskracht voor een wereldwijd publiek verbetert.

CSS Light-Dark Functie: Automatische Thema-aanpassing voor een Wereldwijd Web

In de hedendaagse wereldwijd verbonden wereld moeten websites toegankelijk en visueel aantrekkelijk zijn voor gebruikers met diverse achtergronden en voorkeuren. Een van de meest effectieve manieren om dit te bereiken is door automatische thema-aanpassing, specifiek door zowel een licht als donker thema aan te bieden dat zich aanpast aan de systeeminstellingen van de gebruiker. Deze blogpost leidt je door de implementatie van deze functionaliteit met behulp van CSS media queries en custom properties, wat zorgt voor een naadloze en comfortabele browse-ervaring voor je internationale publiek.

Waarom Automatische Lichte en Donkere Thema's Implementeren?

Er zijn verschillende overtuigende redenen om automatische thema-aanpassing in je webprojecten op te nemen:

Hoe Implementeer je Automatische Thema-aanpassing met CSS

De kern van automatische thema-aanpassing ligt in de prefers-color-scheme media query. Deze CSS media query stelt je in staat om het voorkeur kleurenschema van de gebruiker (licht of donker) te detecteren en de bijbehorende stijlen toe te passen.

Stap 1: Definieer Custom Properties (CSS-variabelen)

Begin met het definiëren van custom properties (CSS-variabelen) om de kleurwaarden voor je lichte en donkere thema's op te slaan. Dit maakt het eenvoudig om tussen thema's te wisselen door simpelweg de waarden van de variabelen bij te werken.


:root {
  --background-color: #ffffff; /* Achtergrond licht thema */
  --text-color: #000000; /* Tekst licht thema */
  --link-color: #007bff; /* Linkkleur licht thema */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Achtergrond donker thema */
    --text-color: #ffffff; /* Tekst donker thema */
    --link-color: #66b3ff; /* Linkkleur donker thema */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

In dit voorbeeld definiëren we variabelen voor achtergrondkleur, tekstkleur, linkkleur en knopkleuren. De :root selector past deze variabelen toe op het hele document. De @media (prefers-color-scheme: dark) media query overschrijft deze variabelen vervolgens met waarden voor het donkere thema wanneer de gebruiker zijn systeem op de donkere modus heeft ingesteld.

Stap 2: Pas Custom Properties toe op je Styles

Vervolgens pas je deze custom properties toe op je CSS-stijlen om het uiterlijk van de elementen van je website te beheren.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Vloeiende overgang */
}

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

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Hier gebruiken we de var()-functie om de waarden van onze custom properties te gebruiken. We hebben ook een transition-eigenschap toegevoegd aan het body-element om een vloeiende overgang tussen thema's te creëren.

Stap 3: Testen en Verfijnen

Test je implementatie grondig op verschillende browsers en besturingssystemen. Moderne browsers zoals Chrome, Firefox, Safari en Edge ondersteunen de prefers-color-scheme media query volledig. Je kunt schakelen tussen lichte en donkere modi in de instellingen van je besturingssysteem om de wijzigingen op je website te zien.

Geavanceerde Technieken en Overwegingen

Een Handmatige Themaschakelaar Bieden

Hoewel automatische thema-aanpassing een geweldig uitgangspunt is, geven sommige gebruikers er misschien de voorkeur aan hun systeeminstellingen handmatig te overschrijven. Je kunt een handmatige themaschakelaar bieden met behulp van JavaScript en local storage.

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // Standaard naar auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Pas het initiële thema toe bij het laden van de pagina
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // Indien ingesteld op auto, laat prefers-color-scheme beslissen
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Voeg de volgende CSS toe samen met de vorige CSS. Let op de handmatige overschrijving:


body.light-theme {
  --background-color: #ffffff; /* Achtergrond licht thema */
  --text-color: #000000; /* Tekst licht thema */
  --link-color: #007bff; /* Linkkleur licht thema */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Achtergrond donker thema */
  --text-color: #ffffff; /* Tekst donker thema */
  --link-color: #66b3ff; /* Linkkleur donker thema */
  --button-background-color: #333;
  --button-text-color: #fff;
}

Dit codefragment voegt een knop toe waarmee gebruikers kunnen schakelen tussen lichte, donkere en automatische thema's. Het geselecteerde thema wordt opgeslagen in local storage zodat het behouden blijft bij het opnieuw laden van de pagina.

Omgaan met Afbeeldingen en SVG's

Sommige afbeeldingen en SVG's zien er mogelijk niet goed uit in zowel lichte als donkere thema's. Je kunt CSS media queries gebruiken om conditioneel verschillende versies van deze assets weer te geven.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Dit codefragment toont één afbeelding (met klasse light-mode) in de lichte modus en een andere afbeelding (met klasse dark-mode) in de donkere modus.

Overwegingen voor Kleurenpaletten voor een Internationaal Publiek

Wees bij het kiezen van kleurenpaletten voor je lichte en donkere thema's bedacht op culturele associaties en toegankelijkheidsoverwegingen. Hier zijn enkele algemene richtlijnen:

Prestatieoverwegingen

Hoewel het implementeren van automatische thema-aanpassing relatief eenvoudig is, is het belangrijk om rekening te houden met de mogelijke impact op de prestaties. Vermijd het gebruik van overdreven complexe CSS-selectors of animaties die het renderen kunnen vertragen. Zorg er ook voor dat je custom properties efficiënt zijn gedefinieerd om de overhead van het opzoeken van variabelen te minimaliseren.

Hier zijn enkele best practices voor het optimaliseren van de prestaties:

Best Practices voor Toegankelijkheid

Zorg ervoor dat je lichte en donkere thema's voldoen aan de toegankelijkheidsrichtlijnen, zoals WCAG (Web Content Accessibility Guidelines). Dit omvat het bieden van voldoende kleurcontrast, het gebruik van semantische HTML en ervoor zorgen dat alle interactieve elementen toegankelijk zijn via het toetsenbord.

Hier zijn enkele specifieke best practices voor toegankelijkheid om te volgen:

Voorbeelden uit Verschillende Regio's

Overweeg deze voorbeelden van hoe lichte en donkere thema's kunnen worden afgestemd op diverse wereldwijde doelgroepen:

Conclusie

Het implementeren van automatische lichte en donkere thema's is een cruciale stap naar het creëren van een meer toegankelijke en gebruiksvriendelijke webervaring voor een wereldwijd publiek. Door gebruik te maken van CSS media queries en custom properties, kun je het uiterlijk van je website eenvoudig aanpassen aan de voorkeuren van de gebruiker, oogvermoeidheid verminderen en de toegankelijkheid voor gebruikers met visuele beperkingen verbeteren. Denk eraan om rekening te houden met culturele associaties, toegankelijkheidsrichtlijnen en prestatieoverwegingen om een naadloze en inclusieve browse-ervaring voor iedereen te garanderen.

Door deze technieken toe te passen, toon je een toewijding aan moderne webdesignprincipes en kom je tegemoet aan de diverse behoeften van je internationale publiek, waardoor je website een gastvrije en comfortabele ruimte voor iedereen wordt.