I want to know how can I dynamically set (also update) new localstorage on OnClick function. I'm newbie in javascipt - i have created this switch dark/light theme function but i don't know what do next.
What do i want to get? - set or update theme (dark or light) on click in localstorage. I would like visitors to save their settings by clicking on local storage. After refresh - if they saved "dark theme" - they will get dark theme, else - light theme
// 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 remove
Try some thing like
// 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);