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