Get detailed info to implement the switch to dark & light mode functionality along with changing the button text respective to the mode using HTML, CSS, & JS.

In this modern world, every smart device user seeks the display modes of the screen like dark mode. With the below simple functionality, you can implement the dark mode for any type of application based on the requirement and environment.

So let’s get started by writing the required markup with the necessary input details followed by CSS and then finally the JS implementation.

Step:1 HTML Structure

index.html

<!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>clock</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <button class="toggle">Dark mode</button>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
      corporis quisquam deserunt quam natus neque aliquid, sed voluptate,
      ratione esse amet quia recusandae consequatur laudantium reiciendis. Harum
      minus rem pariatur.
    </div>
    <ul>
      <li>hello</li>
      <li>hello</li>
      <li>hello</li>
      <li>hello</li>
      <li>hello</li>
    </ul>
    /* your own image folder path */
    <img src="./img/Daco_4135182.png" alt="image" />
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
      corporis quisquam deserunt quam natus neque aliquid, sed voluptate,
      ratione esse amet quia recusandae consequatur laudantium reiciendis. Harum
      minus rem pariatur.
    </div>
    <ol>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
    </ol>
    <table>
      <tr>
        <th>section-1</th>
        <th>one</th>
        <th>two</th>
      </tr>
      <tr class="even">
        <td>section-2</td>
        <td>three</td>
        <td>four</td>
      </tr>
      <tr>
        <td>section-3</td>
        <td>five</td>
        <td>six</td>
      </tr>
    </table>
    <script src="script.js"></script>
  </body>
</html>

Step:2 Write the required CSS

Read moreNSX-T Tier-1 Service Router (SR) Placement

While switching the dark mode, the entire application background should turn to black and the data present in the application should turn to their respective color, for example, if the data is in text format then it should turn from black to white, or if any light colors are there should to their respective dark color. 

Here is the required CSS with the file name as style.css for the above-mentioned action.

style.css

/* here we are defining the primary and secondary 
colors as root variables so that we can change the colors only 
in the root variable if we need to change it in the future. */
:root {
  --primary-color: #000;
  --secondary-color: #fff;
}
html {
  transition: all 0.5s ease-in;
}

html.dark {
  --primary-color: #fff;
  --secondary-color: #333;
}

html.dark {
  background-color: #111;
  color: var(--primary-color);
}
body {
  max-width: 50%;
  display: block;
  margin: 0 auto;
}
.toggle {
  cursor: pointer;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  border: 0;
  border-radius: 4px;
  width: 50%;
  margin: 60px auto;
  display: block;
  padding: 20px;
}
img {
  max-width: 100%;
  width: 200px;
  display: block;
  margin: 25px auto;
}

.toggle:focus {
  outline: none;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

Step:3 Implementing JavaScript functionality

Here is the actual functionality of the project, which is implementing the dark mode for any type of application. Here I’m implementing it for a web page and it switches only black and white colors.

Script.js

var toggle = document.querySelector(".toggle");
toggle.addEventListener("click", (e) => {
  const html = document.querySelector("html");
  if (html.classList.contains("dark")) {
    html.classList.remove("dark");
    e.target.innerHTML = "Dark mode";
  } else {
    html.classList.add("dark");
    e.target.innerHTML = "Light mode";
  }
});
Read moreVCF, NSX, SD-WAN, AWS

Here are the exact results with the above code.

Final Results:

Result GIF of toggling dark/light mode on click

Conclusion:

In the above video, you can clearly see that by clicking on the button above we are switching to the dark-mode and normal and this amazing effect is achieved with the simple JavaScript code. 

So guys have a trial with this effect and experiment with different colors. 🙌

Similar Posts