Theme-Auswahl speichern

Teil des Abschnitts JavaScript in Action der HTML-Journey von Coddy — Lektion 17 von 27.

Wenn Benutzer zwischen hellen und dunklen Themes wechseln, möchten wir, dass die Website sich ihre Wahl merkt.
Dafür verwenden wir <strong>localStorage</strong> in JavaScript. Es speichert Daten im Browser, und diese Daten bleiben erhalten, selbst wenn die Seite aktualisiert oder der Browser geschlossen wird.

Die Logik ist:

Wenn der Benutzer das Theme umschaltet, speichere das aktuelle Theme in localStorage.
Wenn die Seite lädt, prüfe localStorage und wende das gespeicherte Theme automatisch an.

HTML:

<button id="themeToggle">Toggle Theme</button>

CSS:

body.dark-mode {
  background-color: #222;
  color: #fff;
}

Dieser Code prüft, ob der Benutzer zuvor ein dunkles Design in localStorage gespeichert hat und wendet es an, wenn die Seite geladen wird.

Wenn die Schaltfläche angeklickt wird, schaltet sie den Dark Mode auf der Seite um und aktualisiert dann localStorage, damit die Einstellung für den nächsten Besuch gespeichert bleibt.

const button = document.getElementById("themeToggle");

// Gespeichertes Theme beim Laden der Seite anwenden
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // Einstellung speichern
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Dies stellt sicher, dass die Einstellungen des Benutzers bei weiteren Besuchen Ihrer Website erhalten bleiben.

Aufgabe

Einfach

Erstellen Sie einen Theme-Umschalter, der sich die Benutzerpräferenz merkt.

Schritte:

Beim Laden der Seite: Prüfen Sie, ob der Benutzer zuvor den Dark Mode ausgewählt hat
1. Wenn "dark" im localStorage gespeichert ist, fügen Sie die Klasse "dark-mode" zum body hinzu
Wenn der Umschalt-Button geklickt wird: Zwischen hellem und dunklem Theme wechseln
1. Schalten Sie die Klasse "dark-mode" auf dem body-Element um
2. Speichern Sie das aktuelle Theme im localStorage

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>