1

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;
});
Matt Mora
  • 35
  • 5

0 Answers0