Actualmente estoy creando un blog de música que usa el siguiente código JavaScript para alternar los botones de modo oscuro/modo claro:
function swapStylesheet(sheet) { document.getElementById('swap').setAttribute('href', sheet); }Mi problema es que el sitio web vuelve a la hoja CSS predeterminada cada vez que se actualiza la página o se visita una nueva, en lugar de recordar el tema elegido. ¿Puedo hacer que mi sitio web recuerde el último tema elegido por el usuario a través de cookies, almacenamiento local u otra cosa?
¡Por favor hagamelo saber! Muchas gracias. =]
La respuesta corta es sí. Puede guardarlo a través de cookies o almacenamiento local, y hay muchas maneras de lograrlo, solo le daré una referencia para las cookies, puede probarlo en W3School
La pregunta que hizo en este momento es solo para entre páginas, pero en los casos en que desea que se conserve en función de las cuentas de usuario, entonces la respuesta es que necesita centralizar los datos del "Tema" para cada cuenta en algún lugar como Base de datos o Caché del servidor.
https://www.w3schools.com/js/js_cookies.asp
function setCookie(cname, cvalue, exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); let expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for (let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function checkCookie() { let user = getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:", ""); if (user != "" && user != null) { setCookie("username", user, 30); } } } checkCookie();