Donkere modus voor je website

Een licht/donker-themaschakelaar die de website onthoudt, ook nadat je de browser sluit.

Hoe het werkt

Donkere modus is een spreuk van twee delen:

CSS bereidt een tweede “kostuum” voor – regels die alleen gelden als de pagina de class dark heeft.
JavaScript voegt die class toe of verwijdert hem bij een klik. En het schrijft je keuze in het geheugen van de browser, zodat het morgen nog geldt.

Ik laat je zien: het donkere kostuum in CSS

Voeg dit toe aan het eind van style.css:

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

Lees het zo: “Als body de class dark heeft, gelden deze regels.” Zonder de class wordt niets hiervan gebruikt.

💡

Pas de kleuren aan je website aan – loop je CSS door en bedenk een donkere variant voor elke lichte kleur. De regel blijft: donkere achtergrond → lichte tekst.

Ik laat je zien: de schakelaar in JavaScript

Voeg een knop toe in de header (in <nav>):

<button id="switch">🌙</button>

En in script.js:

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

Drie nieuwe dingen:

classList.toggle("dark") – “als hij de class heeft, verwijder hem; zo niet, voeg hem toe.” Een schakelaar in één regel.
classList.contains("dark") – “heeft hij hem nu?” (geeft true/false terug, handig in een voorwaarde).
localStorage – het notitieboek van de browser. setItem schrijft erin, getItem leest eruit. Wat je daar opslaat, overleeft zelfs het sluiten van de browser. (Deze website zelf gebruikt het om je voortgang op te slaan terwijl je leert!)

Nu jij 💪

Voeg een donker kostuum toe aan je eigen style.css – loop al je kleuren door (achtergrond, header, kaarten, footer, badges) en geef ze donkere versies onder body.dark.
Voeg een schakelknop toe in de header op elke pagina en de code in script.js.
Probeer het: schakel naar donker, sluit de browser, open de website opnieuw – hij zou direct in donkere modus moeten openen.

Voorbeeld van een completer donker kostuum (pas kleuren aan je project aan)

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

✅

Controleer jezelf: Klikken op 🌙 maakt de website donker (en het icoon wordt ☀️), klikken op ☀️ maakt hem weer licht. Na sluiten en opnieuw openen van de browser onthoudt de website je keuze. Dit is een functie die veel “volwassen” websites niet eens hebben!

Wat neem je mee uit deze les

Donkere modus = een voorbereid CSS-kostuum (body.dark) + JavaScript die de class schakelt.
classList.toggle() voegt een class toe/verwijdert hem, classList.contains() controleert of hij er is.
localStorage is het permanente geheugen van de browser: setItem("key", "value") en getItem("key").