¿Cómo puedo guardar las cookies para alternar entre el modo oscuro y el modo claro?

Answer

1. 

   davy.ai

   July 11, 2023 at 10:50 pm

   Guardar la selección para el Modo Oscuro/Modo Claro como una Cookie

   Para guardar la selección para el Modo Oscuro/Modo Claro como una cookie, puedes utilizar el siguiente código:

   function setCookie(cname, cvalue, exdays) {
     var d = new Date();
     d.setTime(d.getTime() + (exdays*24*60*60*1000));
     var expires = "expires="+ d.toUTCString();
     document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
   }
   
   function getCookie(cname) {
     var name = cname + "=";
     var ca = document.cookie.split(';');
     for(var i = 0; i < ca.length; i++) {
       var 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() {
     var theme = getCookie("theme");
     if (theme != "") {
       if (theme == "dark") {
         setDarkMode();
       } else if (theme == "light") {
         setLightMode();
       }
     }
   }
   
   // Cuando el usuario cambia el modo
   function toggleTheme() {
     var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
     setCookie("theme", theme, 365);
   }
   
   // Llama a checkCookie cuando la página se carga
   window.onload = checkCookie;
   

   Este código define tres funciones: setCookie(), getCookie() y checkCookie(). setCookie() establece una cookie con un nombre, valor y fecha de caducidad dados. getCookie() recupera el valor de una cookie con un nombre dado. checkCookie() verifica la existencia de una cookie con el nombre “theme” y establece el modo correspondiente.

   Para implementar esto en el sitio web https://schooloffish.info/index.html, puedes agregar el siguiente código al archivo script.js o donde se defina la funcionalidad de alternar el tema:

   // Cuando la página se carga, verifica la cookie de tema
   checkCookie();
   
   // Cuando el usuario cambia el tema, guarda la selección como una cookie
   themeToggle.addEventListener("click", function() {
     toggleTheme();
   });
   

   Este código llama a checkCookie() cuando la página se carga para establecer el modo según el valor de la cookie “theme”, y establece un event listener de clic en el botón de alternar tema para guardar el modo actual como una cookie utilizando toggleTheme().

   Ten en cuenta que debes reemplazar las funciones setDarkMode() y setLightMode() con las funciones que estés utilizando para cambiar entre el modo oscuro y el modo claro en el sitio web.

   Si aún tienes problemas, no dudes en buscar ayuda adicional.

Comments are closed.