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;
}
}
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";