Create Dark Mode functionality with pure JavaScript

#javascript

I was using front-end Framworks as Vue Js and jQuery, but I discover that I have some problems that I must fix in JavaScript basics (and I’m proud to fix and learn new things always) because at all you will use Js in your Frameworks based project necessarily.

I decided to learn some principal in Js with deeply way because I’m not learned it correctly in the beginning, and I will share some simple Implementations as blog posts maybe it will help someone in somewhere.

Let’s start with creating a feature that is very common in websites this days, “Dark Mode functionality” .

The HTML page structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dark Mode</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
  </head>
  <body>
    <header>
      <button><i class="fas fa-sun"></i></button>
    </header>
    <main>
      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>

      <article>
        <h2>Pure Javascript Dark Mood</h2>
        <span class="date">May 7, 2021</span>
      </article>
    </main>
  </body>
</html>

We will use this simple CSS style for the page:

body {
  text-align: center;
}

article {
  margin-bottom: 1rem;
  border-bottom: 2px solid #ccc;
  padding: 10px;
}

button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 2rem;
}

.darking-mode {
  background: #374151;
  color: #fff;
}

The JavaScript function that will handle the click and switching between normal and dark mode, I will try to explain every line of code clearly. I used to comment my code so its already commented but I will try to explain it also.

// get the element to be clicked
const buttonToBeClicked = document.querySelector('button');

// addEventListener() method to execute the main function
buttonToBeClicked.addEventListener("click", darkMode);

// our dark mode function
function darkMode() {
  //console.log('Clicked!!');
  let theBody = document.body;
  theBody.classList.toggle('darking-mode');
    //console.log('switched to dark mode!');
  if (document.body.classList.contains('darking-mode')) {
     let icon = document.querySelector('i');
     //console.log(icon);
     icon.classList.remove('fa-sun');
     icon.classList.add('fa-moon');
  } else {
     let icon = document.querySelector('i');
     icon.classList.remove('fa-moon');
     icon.classList.add('fa-sun');
  }
}

Function explaining:

I used an addEventListener() method to handle click to execute the function that will do the work.

After that I stocked the body element in “theBody” variable.

And I used “Element.classList” a property that return a live class “darking-mode” that is responsible on changing elements color and body background color.

Finally I use an if statement to handle toggle fontawesome icons.

The blog post has originally posted on my personal blog. Hope that will helps someone, somewhere.