Day Mode and Night Mode

Sovann Sun 0
Viewed 26

I have tried to create the day mode and night with a check box button. it's working well. the default mode is day mode but the problem is when I'm in night mode then refresh the page or go to other pages on the site it will be back to day mode

JavaScript

const themeToggler = document.querySelector(".theme-toggler");

//Change Theme
themeToggler.addEventListener("click", () => {
  document.body.classList.toggle("dark-theme-variables");
  themeToggler.querySelector("span:nth-child(1)").classList.toggle("active");
  themeToggler.querySelector("span:nth-child(2)").classList.toggle("active");
});
javascript
1 Answers

This is expected behavior, state changes made via JavaScript are not preserved between site reloads.

You need some kind of mechanism, that'll store the preferred mode on the client's device.

As far I know there are two ways you can do this:

Example (from mdn) using LocalStorage:

// Stores "Tom" in "myCat"
localStorage.setItem("myCat", "Tom");

// Retrieves whatever is in "myCat":
const cat = localStorage.getItem("myCat");

Adjusted to your use case, you can do something like this:

const themeToggler = document.querySelector(".theme-toggler");

//Change Theme
themeToggler.addEventListener("click", () => {
  document.body.classList.toggle("dark-theme-variables");

  const is_dark_mode = document.body.classList.contains(
    "dark-theme-variables"
  )

  // storing the user's preference in LocalStorage
  window.localStorage.setItem("dark-mode", is_dark_mode)
});

Later you can retrieve the value and adjust the classes of <body>:

const wants_dark_mode = window.localStorage.getItem("dark-mode") === true

if (wants_dark_mode) {
  document.body.classList.add("dark-theme-variables")
}
marco-a0
Related