¿Hay alguna forma de guardar el estado del modo oscuro/claro en html incluso si cierro y vuelvo a visitar la página? Estoy tratando de lograrlo con localStorage , pero no pude lograr que funcione. Aquí está mi código:
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; } }El problema es uno de los tipos de datos .....
localstorage solo almacena cadenas.
Cuando guarda TRUE en el almacenamiento local, se convierte en una expresión de cadena "true" .
En su declaración if, simplemente pregunta si el valor "LDMode" tiene un valor ("verdadero" o "falso") como cadenas. Siempre será cierto.
Configurar el almacenamiento local de esta manera: localStorage.setItem("LDMode", true) resultará en este console.log(localStorage.getItem("LDMode")); devolviendo "true"
Primero, desea probar si LDMode tiene un valor, luego convierta ese valor en un valor booleano:
actualizado para ser más simple:
let ldmode = localStorage.getItem("LDMode") === "true";