Skip to content
Related Articles

Related Articles

Improve Article

How to Make Dark Mode for Websites using HTML CSS & JavaScript ?

  • Last Updated : 22 Jul, 2021

Light-on-dark color scheme, also called black mode, dark mode, dark theme, or night mode. In this mode, light-colored text, icons are displayed on a dark-colored background. In short, the contents of a webpage are displayed on a dark background. Dark-mode is better for your eyes in low-light surroundings. The idea behind dark mode is to increase readability by reducing the light emitted by device screens while maintaining the minimum color contrast ratios. Switching to dark mode allows website users to move to an eye-friendly and resource-saving design whenever they want. 

Steps to create Dark-Mode websites using HTML, CSS, and JavaScript:

  1. Create a HTML document.
  2. Add CSS properties to the body and add dark-mode class properties in CSS.
  3. Add buttons to switch between Dark and Light Mode.
  4. Add functionality to buttons to switch between dark-mode and light-mode using JavaScript.

Example 1: The following example demonstrates switching between light and dark-mode using HTML, CSS, and JavaScript code. It uses 2 functions namely: darkMode() and lightMode() to switch between the two modes.

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>Document</title>
    <style>
      body {
        padding: 25px;
        background-color: white;
        color: black;
        font-size: 25px;
      }
      .dark-mode {
        background-color: black;
        color: white;
      }
      .light-mode {
        background-color: white;
        color: black;
      }
    </style>
  </head>
  <body>
    <h1>GeeksForGeeks</h1>
  
    <p>
      This is a sample GeeksForGeeks Text. 
      Dark Mode Websites using Html CSS &
      Javascript
    </p>
  
    <img src=
  
    <h3 id="DarkModetext">Dark Mode is OFF</h3>
    <button onclick="darkMode()">Darkmode</button>
    <button onclick="lightMode()">LightMode</button>
    <script>
      function darkMode() {
        var element = document.body;
        var content = document.getElementById("DarkModetext");
        element.className = "dark-mode";
        content.innerText = "Dark Mode is ON";
      }
      function lightMode() {
        var element = document.body;
        var content = document.getElementById("DarkModetext");
        element.className = "light-mode";
        content.innerText = "Dark Mode is OFF";
      }
    </script>
  </body>
</html>

Output:

Dark-mode using HTML, CSS and Javascript

Example 2: In the above example, we have used two buttons to switch between Dark and light mode. Now we will use toggle() method in JavaScript to toggle between dark and light mode.

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>Document</title>
    <style>
      body {
        padding: 25px;
        background-color: white;
        color: black;
        font-size: 25px;
      }
      .dark-mode {
        background-color: black;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>GeeksForGeeks</h1>
    <h2>Dark Mode tutorial using HTML, CSS and JS</h2>
  
    <p>GeeksForGeeks Sample Text</p>
  
    <img src=
    <div>
      <button onclick="darkMode()">Darkmode</button>
    </div>
    <script>
      function darkMode() {
        var element = document.body;
        element.classList.toggle("dark-mode");
      }
    </script>
  </body>
</html>

Output:

Toggle between dark and light mode using HTML, CSS, and JavaScript

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :