Estoy haciendo un sitio web para mi proyecto Uni que requiere 5 páginas.
Este es mi código para configurar el modo oscuro en la página de inicio, pero cuando voy a la segunda página, necesito presionar manualmente el botón para volver a activar el modo oscuro en lugar de mantener la información de la página de inicio.
<img src="DM.png" id="icon"> </div> <script type="text/javascript"> var icon = document.getElementById("icon"); icon.onclick = function() { document.body.classList.toggle("darktheme"); if (document.body.classList.contains("darktheme")) { icon.src="LM.png"; }else icon.src="dm.png"; } </script>localStorage La propiedad de solo lectura localStorage de la interfaz de la ventana le permite acceder a un objeto de almacenamiento para el origen del documento; los datos almacenados se guardan en las sesiones del navegador.
var icon = document.getElementById("icon"); // on page load event we can use previous theme value window.onload = function() { initTheme(); }; function initTheme() { const theme = localStorage.getItem('theme'); if (theme == 'dark') { icon.src="LM.png"; } else { icon.src="dm.png"; } } // on icon element click we check the localstorage item 'theme' value to control which theme we should use icon.onclick = function() { localStorage.getItem('theme') === 'dark' ? localStorage.setItem('theme', '') : localStorage.setItem('theme', 'dark'); initTheme(); }Lo único que tienes que hacer es almacenar tu tema dentro de document.cookie . Este es el código que necesitas:
<img src="DM.png" alt="OPS!" id="icon" /> <script type="text/javascript"> var icon = document.getElementById("icon"); //Theme saves here var theme = /theme/.test(document.cookie) ? document.cookie.split("theme=")[1].split(';')[0] : "whitetheme"; //Load theme at first window.onload = function () { if (theme == "darktheme") { document.body.classList.add("darktheme"); } }; icon.onclick = function () { document.body.classList.toggle("darktheme"); if (document.body.classList.contains("darktheme")) { icon.src = "LM.png"; theme = "darktheme"; } else { icon.src = "dm.png"; theme = "whitetheme" } //Save theme and expire time var date = new Date(); document.cookie = "theme=" + theme + ";expires=" + date.setTime(date.getTime() + (365*24*60*60*1000)) + ";path=/" } </script>Tenga una página de configuración donde el usuario pueda seleccionar la configuración que desee y guardarla en la base de datos.
Luego cárguelo en una variable de sesión cuando inicien sesión.
Actualice esa variable de sesión en caso de que la cambien mientras están conectados.
Tenga una página de configuración separada o inclúyala en su página de perfil. La página de perfil es donde pueden cambiar el correo electrónico, la contraseña, el avatar, etc.