Skocz do zawartości
Pecetowicz Forum komputerowe

Jak zapisać wersję motywu strony w ciasteczkach?


Przejdź do rozwiązania Rozwiązane przez aXenDev,

Rekomendowane odpowiedzi

Mam skrypt który przełącza między data-theme="dark" oraz data-theme="light" domyślnym stylem jest "Light". Jak mogę zapisać dane o wersji motywu ciasteczkach? Chciałbym uzyskać efekt: użytkownik przełącza na tryb dark i po f5 dalej jest dark dopóki nie zmieni na light.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
  • Rozwiązanie

Sprawdź Window.localStorage albo js-cookie.

Kod JS:

// On page load set the theme.
(function() {
  let onpageLoad = localStorage.getItem("theme") || "";
  let element = document.body;
  element.classList.add(onpageLoad);
  document.getElementById("theme").textContent =
    localStorage.getItem("theme") || "light";
})();

function themeToggle() {
  let element = document.body;
  element.classList.toggle("dark-mode");

  let theme = localStorage.getItem("theme");
  if (theme && theme === "dark-mode") {
    localStorage.setItem("theme", "");
  } else {
    localStorage.setItem("theme", "dark-mode");
  }

  document.getElementById("theme").textContent = localStorage.getItem("theme");
}

Kod HTML:  

<button type="button" onclick="themeToggle()">Theme Toggle</button>
<div id="theme"></div>
  • Lubię to! 5
  • Super 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...