Entonces, tengo varias páginas web y quiero que permanezcan oscuras, si el modo oscuro está activado en otra página. Entonces, agregué un script js a todos mis archivos HTML y no funcionó en absoluto. Después de eso, traté de agregar este script a un solo archivo HTML y permaneció oscuro después de recargar la página, pero, obviamente, no afectó a otras páginas. ¿Cómo puedo cambiar el script para que funcione y dónde está el problema?
Guion:
if(localStorage.getItem("theme")==null){ localStorage.setItem("theme", "light"); } let localData = localStorage.getItem("theme"); if (localData == "light") { icon.src = "images/moon.png"; document.body.classList.remove("dark-theme"); } else if (localData == "dark") { icon.src = "images/sun.png"; document.body.classList.add("dark-theme"); } icon.onclick = function () { document.body.classList.toggle("dark-theme"); if (document.body.classList.contains("dark-theme")) { icon.src = "images/sun.png"; localStorage.setItem("theme", "dark"); } else { icon.src = "images/moon.png"; localStorage.setItem("theme", "light"); } } ```Asegúrese de que su <script> esté definido después de la etiqueta del cuerpo ( https://stackoverflow.com/a/9916754/18667225 ). ¡Comprueba si hay errores en F12-Console! En la pestaña F12 Web-Storage también puede inspeccionar el estado de su clave.
Este código simplificado me funciona en Firefox:
<!DOCTYPE html> <html> <head> </head> <body onclick=toggle_theme()> Hello World! <body> <script> if (localStorage.getItem("theme")==null){ localStorage.setItem("theme", "light"); } let localData = localStorage.getItem("theme"); if (localData == "light") { alert("moon pre"); document.body.classList.remove("dark-theme"); } else if (localData == "dark") { alert("sun pre"); document.body.classList.add("dark-theme"); } function toggle_theme() { document.body.classList.toggle("dark-theme"); if (document.body.classList.contains("dark-theme")) { alert("sun"); localStorage.setItem("theme", "dark"); } else { alert("moon"); localStorage.setItem("theme", "light"); } } </script> </html>