How to Create Dark/Light Mode for a Website using JavaScript/jQuery?

Javascript Web Development Front End Technology

Dark mode is very important for any website. Users with different interests visit the websites. Some of them like dark mode, and some like light mode.

According to one survey, around 70 to 80% of people like dark mode, and only 20 to 30% like light mode. So, it is necessary to create a dark mode for any website, allowing users to toggle between the dark and light modes.

Below, we will create a simple webpage using HTML, CSS, and JavaScript. Also, we will learn to implement the light and dark modes using JavaScript and CSS.

Syntax

Users can follow the syntax below to toggle between the dark and light themes.

body.classList.toggle("dark-theme");

In the above syntax, we have passed the dark-theme class name as a parameter of the toggle method. It adds and removes the class from a particular HTML element.

Algorithm

Users can follow the algorithm below to switch between dark and light themes.

Step 1 − Write HTML code for a webpage, and apply CSS for the light theme as usual.
Step 2 − Create a styling using CSS for the dark theme.
Step 3 − Create a button, and add an onclick event in the button. When a user clicks the button, it should toggle between the dark and light themes.
Step 4 − To toggle between the dark and light themes, we can add and remove particular classes from the element. For example, create a class for a dark theme and CSS for a dark theme. When we add dark-theme class to the body, the dark theme should be applied to the whole website, and when we remove it, it should be normal.

Example 1

In the example below, when users click the button, we invoke the changeMode() function. The changeMode() function changes the button's text according to the theme.

Also, we have accessed the whole webpage using the document.body, and added the dark-theme class to the whole body using JavaScript to change the theme to the dark mode.

<html>
<head>
   <style>
      body {
         color: black;
         background-color: rgb(241, 241, 241);
         text-align: center;
         justify-content: center;
      }
      .dark-theme {
         color: white;
         background-color: rgb(26, 20, 20);
      }
      button {
         width: 13rem;
         height: 2rem;
         font-size: 1.5rem;
         background-color: aqua;
         border: none;
         border-radius: 12px;
      }
      p {
         font-size: 1.2rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i> toggle method to </i> toggle between light and dark mode in JavaScript. </h2>
   <p>This is the content of the webpage. </p>
   <button onclick = "changeMode()" id = "button"> Dark Mode </button>
   <script>
      function changeMode() {
         var body = document.body;
         
         // toggle the theme
         body.classList.toggle("dark-theme");
         let button = document.getElementById('button');
         
         // change the button text
         if (button.innerHTML == "Dark Mode") {
            button.innerHTML = "Normal Mode";
         } else {
            button.innerHTML = "Dark Mode"
         }
      }
   </script>
</body>
</html>

Example 2

In the example below, we have created the toggle switch button using HTML and CSS. We have used the checkbox for the toggle switch. So, whenever the user checks the check box, the switch turns on. So, we can add and remove the classes for a dark theme based on whether the checkbox is checked.

Furthermore, we have used the addClass() and removeClass() methods of JQuery to add and remove the class from the body.

<html>
<head>
   <style>
      body {
         color: black;
         background-color: rgb(241, 241, 241);
         text-align: center;
         justify-content: center;
      }
      .dark-class {
         color: white;
         background-color: rgb(12, 10, 10);
      }
      p {
         font-size: 1.2rem;
      }
      .toggleButton {
         width: 5rem;
         height: 2rem;
         position: relative;
         display: inline-block;
      }
      .toggleButton input {
         opacity: 0;
      }
      .roundButton {
         background-color: black;
         top: 0;
         left: 0;
         position: absolute;
         right: 0;
         bottom: 0;
         cursor: pointer;
      }
      .roundButton:before {
         left: 0;
         bottom: 0;
         position: absolute;
         content: "";
         background-color: grey;
         transition: 1s;
         height: 2rem;
         width: 2rem;
      }
      input:checked+.roundButton {
         background-color: white;
      }
      input:checked+.roundButton:before {
         transform: translateX(3rem);
      }
      .roundButton.circle {
         border-radius: 2rem;
      }
      .roundButton.circle:before {
         border-radius: 50%;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
   Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
   crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
</head>
<body>
   <h2>Using the <i> JQuery </i> to toggle between light and dark modes in JavaScript.</h2>
   <p>This is the content of the webpage.</p>
   <label class = "toggleButton">
      <input type = "checkbox" id = "toggle">
      <div class = "roundButton circle" ></div>
   </label>
   <script>
      // If the input checkbox is checked, activate dark mode by adding dark-class to the body
      $('#toggle').change(() => {
         if ($('#toggle').is(":checked")) {
            $("body").addClass("dark-class");
         } else {
            $("body").removeClass("dark-class")
         }
      })
   </script>
</body>
</html>

We learned to change between dark and light modes using JavaScript and JQuery. We need to change the web page's CSS and apply CSS for the dark theme. We can apply CSS for dark mode by adding and removing the class from the webpage.