How to save dark/light mode state in HTML/JavaScript [duplicate]

Question

Is there any way to save dark/light mode state in html even if I close and revisit the page. I'm trying to accomplish it with localStorage, but I couldn't manage it to work. Here's my code:

function DLMode() { //This is the button function
  var element = document.body;
  element.classList.toggle("dark-mode");
  if (!darkMode) {
    document.getElementById("dl_mode").src = "images/light.jpg";
    document.documentElement.style.setProperty('--default-white', "rgb(0, 0, 0)");
    document.documentElement.style.setProperty('--default-body', "rgb(48, 48, 48)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(255, 255, 255, 9)");
    darkMode = true;
  } else {
    document.getElementById("dl_mode").src = "images/night.jpg";
    document.documentElement.style.setProperty('--default-body', "rgba(201, 201, 201, .4)");
    document.documentElement.style.setProperty('--default-white', "rgb(255, 255, 255)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(0, 0, 0, .4)");
    darkMode = false;
  }
  localStorage.setItem("LDMode", darkMode);
}

function OnLoad_DL() { //This is page on load function
  var element = document.body;
  element.classList.toggle("dark-mode");
  if (localStorage.getItem("LDMode")) {
    document.getElementById("dl_mode").src = "images/night.jpg";
    document.documentElement.style.setProperty('--default-body', "rgba(201, 201, 201, .4)");
    document.documentElement.style.setProperty('--default-white', "rgb(255, 255, 255)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(0, 0, 0, .4)");
    darkMode = false;
  } else {
    document.getElementById("dl_mode").src = "images/light.jpg";
    document.documentElement.style.setProperty('--default-white', "rgb(0, 0, 0)");
    document.documentElement.style.setProperty('--default-body', "rgb(48, 48, 48)");
    document.documentElement.style.setProperty('--default-shadow', "rgba(255, 255, 255, 9)");
    darkMode = true;
  }
}

Answer 1

The issue is one of datatypes.....

localstorage only stores strings.

When you save TRUE to localstorage it is converted to a string expression "true".

In your if statement you're simply asking if the the value "LDMode" has a value ("true" or "false") as strings. It'll always be true.

Setting local storage like this: localStorage.setItem("LDMode", true) will result in this console.log(localStorage.getItem("LDMode")); returning "true"

First you want to test if LDMode has a value, then convert that value to a Boolean:

updated to be more simple:

let ldmode = localStorage.getItem("LDMode") === "true";