Adding LocalStorage to a Dark Mode Toggle

user_16168028 0
Viewed 387

I am currently working on adding a dark theme toggle to my website and can't seem to figure out the best way to store the data to LocalStorage. All I am using is a button that toggles the class of "dark" on the main document :root. The actual toggle works perfectly fine, I am only struggling with getting that selected option to stay in LocalStorage.

Here is my code with the LocalStorage that I am trying to add (which does save the key of theme to LocalStorage but not the actual class toggle).

document.addEventListener("DOMContentLoaded", function () {
  const theme = localStorage.getItem("theme", "dark");
  const darkModeToggle = document.getElementById("modeSwitch");

  darkModeToggle.addEventListener("click", function () {
    document.documentElement.classList.toggle("dark");

    if (document.documentElement.classList.contains("dark")) {
      localStorage.setItem("theme", "dark");
    }
  });
});

Here are my CSS variables as well for reference.

:root {
  --main-background: #f8fafb;
  --app-background: #ffffff;
  --app-background-alt: #fcfcfc;
  --app-background-hover: #f8fafb;
  --dark-background: #141923;
  --main-color: #000000;
  --secondary-color: #747987;
}

.dark:root {
  --main-background: #141923;
  --app-background: #171b2c;
  --app-background-alt: #1c2031;
  --app-background-hover: #1d213d;
  --dark-background: #141923;
  --main-color: #ffffff;
  --secondary-color: #747987;
}

Thank you so much.

toggle local-storage save css javascript
3 Answers

After playing around a bit, I did figure out a way to successfully store the theme into localStorage. What I am doing is checking to see if the toggle was clicked and "dark" was added to the class list. If it was, I store that in localStorage as "theme", "dark" - and if it "dark" was not added to the class list, I store it in localStorage as "theme", "light".

Then, at the top of the function I check to see if the theme contains "dark" - If the theme contains "dark", I add the class "dark" to the :root, and if it does not I remove it.

I am not sure if this is considered the "correct" way, but it does work!

document.addEventListener("DOMContentLoaded", function () {
  const theme = localStorage.getItem("theme", "dark");
  const darkModeToggle = document.getElementById("modeSwitch");

  if (theme === "dark") {
    document.documentElement.classList.add("dark");
  } else {
    document.documentElement.classList.remove("dark");
  }

  darkModeToggle.addEventListener("click", function () {
    document.documentElement.classList.toggle("dark");

    if (document.documentElement.classList.contains("dark")) {
      localStorage.setItem("theme", "dark");
    } else {
      localStorage.setItem("theme", "light");
    }
  });
});

user_161680280

Remove second parameter, should be like that:

const theme = localStorage.getItem("theme");

When you get item from LocalStorage need just key

user_155451160

the way you are storing the theme in the localStore is fine, if want to do it in other way, you could store the theme in an object. Here and example:

localStorage.setItem("theme",JSON.stringify({theme: "dark"}));

To be honest, i think that if your application is not too big you can leave it the way is it.

user_99370010
Related