How can i use localStorage in a dark mode toggle?

Question

I am using the following javascript code to switch between dark mode and light mode through CSS themes and it works perfectly, but when I add the local.storage, the browser does not save the mode preferences. How can I do it?

HTML:

<button id="darkmode" type="button" onclick="toggleDark()">
<span id="night" class="material-icons">mode_night </span>
<span id="light" class="material-icons">light_mode</span>
</button>

CSS:

[data-theme="light"] {
--main-color: #dfdad8;
--sec-color: #202527;
--third-color: #6e6e65;
--one--color: #acf2be4d;
--two--color: #fdb8c052;
}

[data-theme="dark"] {
 --main-color: #6e6e65;
 --sec-color: #f5f5f5;
 --third-color: #202527;
 --one--color: #acf2bd;
 --two--color: #fdb8c0;
}

Javascript:

function toggleDark() {
  const container = document.body;
  const dataTheme = container.getAttribute("data-theme");
  let theme = localStorage.getItem("data-theme");

if (dataTheme === "light") {
  container.setAttribute("data-theme", "dark");
  document.getElementById("night").style.display = "block";
  document.getElementById("light").style.display = "none";
  localStorage.toggled("data-theme", "dark");

} else {

  container.setAttribute("data-theme", "light");
  document.getElementById("night").style.display = "none";
  document.getElementById("light").style.display = "block";
  localStorage.setItem("data-theme", "light");
  }
}

Answer 1

Two issues:

• Your code disregards the saved value.
• localStorage.toggled is not a thing.

const container = document.body;
if(localStorage.getItem("data-theme")){
container.setAttribute("data-theme",localStorage.getItem("data-theme")); 
toggleDark(1)
} 
//actually use the saved value

function toggleDark(r) {//this function is executed when switching from the current theme to the other
    const dataTheme = container.getAttribute("data-theme");
    let theme_switch;
    if(dataTheme === "light") {theme_switch = 1} else {theme_switch = 0}
    if(r){theme_switch = !theme_switch}//so the oppisite of the theme stored is used when calling this function 
if (theme_switch) {
  container.setAttribute("data-theme", "dark");
  document.getElementById("night").style.display = "block";
  document.getElementById("light").style.display = "none";
  localStorage.setItem("data-theme", "dark");
} else {
  container.setAttribute("data-theme", "light");
  document.getElementById("night").style.display = "none";
  document.getElementById("light").style.display = "block";
  localStorage.setItem("data-theme", "light");
  }
}

If the above code does not work then try the following steps.

1. Open the console and execute localStorage.setItem("data-theme", "dark");.
2. Then refresh the page and execute localStorage.getItem("data-theme").

If it returns null then there may be something blocking your cookies. Try checking your settings.