Designauswahl speichern

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

Wenn Nutzer zwischen hellen und dunklen Designs wechseln, möchten wir, dass sich die Website ihre Wahl merkt.
Dafür verwenden wir localStorage in JavaScript. Es speichert Daten im Browser, und diese Daten bleiben auch erhalten, nachdem die Seite aktualisiert oder der Browser geschlossen wurde.

Die Logik ist:

Wenn der Benutzer das Design umschaltet, speichere das aktuelle Design in localStorage.
Wenn die Seite geladen wird, überprüfe localStorage und wende das gespeicherte Design 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, schaltet sie den Dunkelmodus auf der Seite ein oder aus und aktualisiert anschließend localStorage, damit die Einstellung beim nächsten Besuch gespeichert bleibt

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

// Gespeichertes Design 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");

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

Dadurch wird sichergestellt, dass die Präferenz des Nutzers bei jedem Besuch deiner Website erhalten bleibt.

Aufgabe

Einfach

Erstelle einen Theme-Umschalter, der sich die Benutzereinstellung merkt.

Schritte:

Beim Laden der Seite: Prüfe, ob der Benutzer zuvor den Dunkelmodus ausgewählt hat
1. Wenn "dark" in localStorage gespeichert ist, füge dem body die Klasse "dark-mode" hinzu
Beim Klicken auf den Umschalter: Wechsle zwischen hellem und dunklem Theme
1. Schalte die Klasse "dark-mode" für das 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>