Designauswahl speichern

Teil des Abschnitts JavaScript in Aktion 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 geladen wird, überprü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 auf die Schaltfläche geklickt wird, wird der Dunkelmodus auf der Seite umgeschaltet und anschließend localStorage aktualisiert, damit die Einstellung beim nächsten Besuch gespeichert bleibt

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

// Apply saved theme on page load
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

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

  // Save preference
  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

Erstelle einen Theme-Umschalter, der die Benutzereinstellung speichert.

Schritte:

Beim Laden der Seite: Prüfe, ob der Benutzer zuvor den dunklen Modus ausgewählt hat
1. Wenn "dark" in localStorage gespeichert ist, füge dem body die Klasse "dark-mode" hinzu
Beim Klicken auf die Umschalttaste: Wechsle zwischen hellen und dunklen Themes
1. Schalte die Klasse "dark-mode" am body-Element um
2. Speichere das aktuelle Theme in 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>