En mi blog de Blogger, estoy tratando de crear un conmutador de modo claro en modo oscuro. Creé con éxito el alternador, pero ahora quiero guardar la preferencia del usuario para que, si un usuario se fue con el modo oscuro, obtenga el modo oscuro cuando obtenga el modo oscuro solo después de regresar.
Este es el código que he escrito hasta ahora. Necesito ayuda con el almacenamiento local/cookies para guardar las preferencias del usuario.
<b:tag aria-label='Dark Mode' class='darkmode-toggle' id='modetog' name='a' onclick='myFunction()'><i class='fas fa-adjust'/></b:tag> <script> /* Dark Mode */ var clicks = 0; $('#modetog').click(function() { if (clicks % 2 === 0){ document.querySelector('body').classList.add('isdark'); } else{ document.querySelector('body').classList.remove('isdark'); }++clicks; }); </script>PD: todavía estoy aprendiendo JavaScript, perdón por hacer preguntas estúpidas. No entendí incluso después de buscar en Internet.
Puede usar la API localStorage ( referencia ):
// Code to save setting localStorage.setItem('darkTheme', '1'); // Here you can put any string you want, I just chose 2 understandable ones // Code to retrieve the setting localStorage.getItem('darkTheme');Editar: implementar la solicitud del comentario aquí abajo
Simplemente puede recorrer los componentes de su página y configurar su estilo para que coincida con el tema seleccionado (aunque cargar diferentes css es más eficaz y aconsejable, requeriría editar una buena parte de su código actual)
const theme = localStorage.getItem('darkTheme'); if (theme) { // Runs only if darkTheme is set to 1, or any truthy value // (see https://developer.mozilla.org/en-US/docs/Glossary/Truthy for reference) document.querySelector('body').classList.add('isdark'); clicks++; // This is to keep your theme switcher working: if the page starts dark and the user clicks to change the theme you want to revert back to light }Para incorporar esto en su código:
/* Dark Mode */ var clicks = 0; const theme = localStorage.getItem('darkTheme'); if (theme) { // Runs only if darkTheme is set to 1, or any truthy value // (see https://developer.mozilla.org/en-US/docs/Glossary/Truthy for reference) document.querySelector("body").classList.add("isdark"); clicks++; // This is to keep your theme switcher working: if the page starts dark and the user clicks to change the theme you want to revert back to light } $('#modetog').click(function() { if (clicks % 2 === 0){ document.querySelector('body').classList.add('isdark'); localStorage.setItem('darkTheme', '1'); } else{ document.querySelector('body').classList.remove('isdark'); localStorage.setItem('darkTheme', '0'); } ++clicks; });