I wrote in some Javascript to make the website "dark mode" the issue is that the site has multiple pages and I used a very basic logic to toggle "dark-theme" and when I execute the function "on-click" and then leave the current page it reverts back to the "light-theme" unless I click on the toggle again. Does anyone have a better solution for this so that "dark-theme" will remain active on all pages till otherwise specified by clicking on toggle? I posted my code below.
var icon= document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toggle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src = "images/sun.png";
left1.src= "images/left-white.png";
left2.src= "images/left-white.png";
left3.src= "images/left-white.png";
right1.src= "images/right-white.png";
right2.src= "images/right-white.png";
right3.src= "images/right-white.png";
scroll_up.src= "images/scroll-dark.png";
}else{
icon.src = "images/moon.png";
left1.src= "images/left.png";
left2.src= "images/left.png";
left3.src= "images/left.png";
right1.src= "images/right.png";
right2.src= "images/right.png";
right3.src= "images/right.png";
scroll_up.src= "images/scroll-light.png";
}
};
const scrollBtn = document.getElementById("scroll_up")
scrollBtn.addEventListener("click", () => {
document.documentElement.scrollTop= 0;
});