Quiero saber cómo puedo configurar dinámicamente (también actualizar) un nuevo almacenamiento local en la función OnClick. Soy novato en javascipt: he creado esta función de cambio de tema oscuro/claro, pero no sé qué hacer a continuación.
¿Qué quiero conseguir? - configure o actualice el tema (oscuro o claro) al hacer clic en el almacenamiento local. Me gustaría que los visitantes guarden su configuración haciendo clic en almacenamiento local. Después de actualizar, si guardaron el "tema oscuro", obtendrán el tema oscuro, de lo contrario, el tema claro
// Wait for document to load document.addEventListener("DOMContentLoaded", function(event) { // **************************************** // Variables Settings // **************************************** // Default Set "light" for Body on load document.documentElement.setAttribute("data-theme", "light"); // Get Elements var themeSwitcher = document.getElementById("theme-switcher"); var iconSwitcher = document.getElementById("theme-icon"); var logoSwitcher = document.getElementById("navbar-logo"); // Icons for Theme Switcher var lightIconTheme = "<i class='fa-solid fa-moon fa-lg'></i>"; var darkIconTheme = "<i class='fa-solid fa-sun'></i>"; // Logo for Theme Switcher var lightLogo = "assets/images/logo.svg"; var darkLogo = "assets/images/logo-dark.svg"; // **************************************** // ** On Click Event ** // // **************************************** themeSwitcher.onclick = function() { // Get the current selected theme, on the first run // it should be `light` var currentTheme = document.documentElement.getAttribute("data-theme"); // Switch between `dark` and `light` var switchToTheme = currentTheme === "dark" ? "light" : "dark"; // Switch between Icons var switchedTheme = currentTheme === "dark" ? lightIconTheme : darkIconTheme; // Switch between Logo var switchedLogo = currentTheme === "dark" ? lightLogo : darkLogo; // Set our currenet theme to the new one document.documentElement.setAttribute("data-theme", switchToTheme); // Set our current icon to the new one iconSwitcher.innerHTML = switchedTheme; // Set our current logo to the new one logoSwitcher.innerHTML = "<img src='"+ switchedLogo +"' class='img-fluid' />"; } // End Function() }); // not removePrueba algo como
// Read from local storage, if not already have, write the default value const theme = localStorage.getItem("theme"); if (!theme) { localStorage.setItem("theme", "light"); } // In on onClick, read from local storage const currTheme = localStorage.getItem("theme"); const newTheme = currTheme === "light" ? "dark" : "light"; // udpdate theme in local storage localStorage.setItem("theme", newTheme);