Zapisywanie wyboru motywu

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 17 z 27.

Gdy użytkownicy przełączają się między jasnym i ciemnym motywem, chcemy, aby strona internetowa zapamiętała ich wybór.
W tym celu używamy w JavaScript <strong>localStorage</strong>. Przechowuje on dane w przeglądarce, a dane te pozostają w niej nawet po odświeżeniu strony lub zamknięciu przeglądarki.

Logika jest następująca:

Gdy użytkownik przełącza motyw, zapisz bieżący motyw w localStorage.
Gdy strona się ładuje, sprawdź localStorage i automatycznie zastosuj zapisany motyw.

HTML:

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

CSS:

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

Ten kod sprawdza, czy użytkownik wcześniej zapisał ciemny motyw w localStorage, i stosuje go podczas ładowania strony.

Po kliknięciu przycisku włącza on lub wyłącza tryb ciemny na stronie, a następnie aktualizuje localStorage, aby preferencja została zapamiętana podczas następnej wizyty

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

// Zastosuj zapisany motyw podczas ładowania strony
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

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

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

Dzięki temu preferencje użytkownika są zachowywane podczas kolejnych odwiedzin Twojej witryny.

Wyzwanie

Łatwy

Utwórz przełącznik motywu, który zapamiętuje preferencje użytkownika.

Kroki:

Podczas ładowania strony: Sprawdź, czy użytkownik wcześniej wybrał tryb ciemny
1. Jeśli w localStorage zapisano "dark", dodaj klasę "dark-mode" do elementu body
Po kliknięciu przycisku przełączania: Przełączaj między jasnym i ciemnym motywem
1. Przełącz klasę "dark-mode" elementu body
2. Zapisz bieżący motyw w localStorage

Spróbuj swoich sił

<!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>