Add a darkmode to your site via JavaScript

I’m a beginner and I set myself a challenge: create a darkmode for my portfolio with JS functions.

HTML :

<nav class="navbar dark-mode" id="navbar">

    <ul class="navbar_links">
        <li class="navbar_link first"><a href="#">Accueil</a></li>
        <li class="navbar_link second"><a href="#">Service</a></li>
        <li class="navbar_link third"><a href="#">Mission</a></li>
        <li class="navbar_link fourth"><a href="#">Portfolio</a></li>
        <li class="navbar_link fifth"><a href="#">Contact</a></li>
    </ul>

    <img id="lightModeIcon" src="img/light-mode.png" alt="">

</nav>

JAVASCRIPT:

    function lightMode() {

      const lightModeIcon = document.getElementById('lightModeIcon');
      const navbar = document.getElementById('navbar');

      if (navbar.classList.contains("dark-mode")) {
        lightModeIcon.addEventListener('click', () => {
          navbar.classList.replace("dark-mode", "light-mode");
          lightModeIcon.src = "img/dark-mode.png";
        })
    } else {
        lightModeIcon.addEventListener('click', () => {
          navbar.classList.replace("light-mode", "dark-mode");
          lightModeIcon.src = "img/light-mode.png";
        })
    }
}

     lightMode();

But I have a problem. I use “if…esle”.

The “if” part works. But the “else” part doesn’t work.

Normally, if the user has already clicked on the darkmode button, my #navbar doesn’t contain the “dark-mode” class but “.light-mode”. So the “else” part should run.

Answer

You’re running this function once (presumably when the page is loaded), which will evaluate the condition once and register a single event listener (either the one that sets the class to dark mode, or the one that sets it to light mode). As such, clicks will do the same thing for the entirety.

Instead you should move your if-else check inside the event listener, such that you’re checking the classes at the time of the click. This can be as simple as inverting the third and fourth lines of your function, e.g.:

const lightModeIcon = document.getElementById('lightModeIcon');
const navbar = document.getElementById('navbar');

// Always add this single event listener
lightModeIcon.addEventListener('click', () => {
   // Check the condition inside the listener, take action based on the current state
   if (navbar.classList.contains("dark-mode")) {
      navbar.classList.replace("dark-mode", "light-mode");
      lightModeIcon.src = "img/dark-mode.png";
   } else {
      navbar.classList.replace("light-mode", "dark-mode");
      lightModeIcon.src = "img/light-mode.png";
   }
});