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

We will see how to create a dark mode for websites using HTML, CSS, and JavaScript. Dark mode, also known as black mode, dark theme, or night mode, features light-colored text and icons on a dark-colored background. This mode is easier on the eyes in low-light conditions, aiming to enhance readability by reducing the emitted light from device screens while still maintaining suitable color contrast ratios.

By implementing dark mode, website users can switch to a more eye-friendly and resource-saving design whenever they prefer. Let’s see and learn how to implement this feature!

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

Create an HTML document.
Add CSS properties to the body and add dark-mode class properties in CSS.
Add buttons to switch between Dark and Light Mode.
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.

HTML

<!-- Filename: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>
          How to Make Dark Mode for Websites using HTML CSS & JavaScript  ?
      </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>w3wiki</h1>

    <p>
        This is a sample w3wiki Text.
        Dark Mode Websites using Html CSS &
        Javascript
    </p>

    <img src=
"https://media.w3wiki.net/wp-content/uploads/20200122115631/w3wiki210.png" />

    <h3 id="DarkModetext">Dark Mode is OFF</h3>
    <button onclick="darkMode()">Darkmode</button>
    <button onclick="lightMode()">LightMode</button>
    <script>
        function darkMode() {
            let element = document.body;
            let content = document.getElementById("DarkModetext");
            element.className = "dark-mode";
            content.innerText = "Dark Mode is ON";
        }
        function lightMode() {
            let element = document.body;
            let content = document.getElementById("DarkModetext");
            element.className = "light-mode";
            content.innerText = "Dark Mode is OFF";
        }
    </script>
</body>
</html>

Output:

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

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>
          How to Make Dark Mode for Websites using HTML CSS & JavaScript  ?
      </title>
    <style>
        body {
            padding: 25px;
            background-color: white;
            color: black;
            font-size: 25px;
        }

        .dark-mode {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <h1>w3wiki</h1>
    <h2>Dark Mode tutorial using HTML, CSS and JS</h2>

    <p>w3wiki Sample Text</p>

    <img src=
"https://media.w3wiki.net/wp-content/uploads/20200122115631/w3wiki210.png" />
    <div>
        <button onclick="darkMode()">Darkmode</button>
    </div>
    <script>
        function darkMode() {
            var element = document.body;
            element.classList.toggle("dark-mode");
        }
    </script>
</body>
</html>

Output: