Dunkelmodus für deine Website

Ein Hell/Dunkel-Themenwechsler, den sich die Website merkt – auch nach dem Schließen des Browsers.

Wie es funktionieren wird

Dunkelmodus ist ein Zauber aus zwei Teilen:

CSS bereitet ein zweites „Kostüm” vor – Regeln, die nur gelten, wenn die Seite die Klasse dark hat.
JavaScript fügt die Klasse beim Klicken hinzu oder entfernt sie. Und es schreibt deine Wahl ins Gedächtnis des Browsers, damit es morgen noch gilt.

Zeig mir das: das dunkle Kostüm in CSS

Füge das ans Ende von style.css an:

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

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

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

Lies es so: „Wenn body die Klasse dark hat, gelten diese Regeln.” Ohne die Klasse wird nichts davon benutzt.

💡

Pass die Farben an deine Website an – geh durch dein CSS und überleg dir für jede helle Farbe eine dunkle Schwester. Die Regel bleibt gleich: dunkler Hintergrund → heller Text.

Zeig mir das: der Schalter in JavaScript

Füge einen Button in den Header ein (innerhalb von <nav>):

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

Und 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 = "🌙";
  }
});

Drei neue Sachen:

classList.toggle("dark") – „wenn die Klasse da ist, entferne sie; wenn nicht, füge sie hinzu.” Ein Schalter in einer Zeile.
classList.contains("dark") – „hat sie sie gerade?” (gibt true/false zurück, praktisch in einer Bedingung).
localStorage – das Notizbuch des Browsers. setItem schreibt hinein, getItem liest daraus. Was du dort speicherst, überlebt sogar das Schließen des Browsers. (Genau diese Website benutzt es übrigens, um deinen Lernfortschritt zu speichern!)

Jetzt du 💪

Füge deinem eigenen style.css ein dunkles Kostüm hinzu – geh alle deine Farben durch (Hintergrund, Header, Karten, Footer, Badges) und gib ihnen dunkle Versionen unter body.dark.
Füge auf jeder Seite einen Schalter-Button in den Header ein und den Code in script.js.
Probier es aus: Wechsel in den Dunkelmodus, schließ den Browser, öffne die Website wieder – sie sollte direkt im Dunkelmodus starten.

Beispiel für ein vollständigeres dunkles Kostüm (Farben an dein Projekt anpassen)

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;
}

✅

Kontrolliere dich selbst: Ein Klick auf 🌙 macht die Website dunkel (und das Symbol wechselt zu ☀️), ein Klick auf ☀️ macht sie wieder hell. Nach dem Schließen und Wiederöffnen des Browsers merkt sich die Website deine Wahl. Das ist ein Feature, das viele „Erwachsenen”-Websites nicht mal haben!

Das nimmst du aus dieser Lektion mit

Dunkelmodus = ein vorbereitetes CSS-Kostüm (body.dark) + JavaScript, das die Klasse umschaltet.
classList.toggle() fügt eine Klasse hinzu oder entfernt sie, classList.contains() prüft, ob sie da ist.
localStorage ist das dauerhafte Gedächtnis des Browsers: setItem("key", "value") und getItem("key").