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

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:
Create a 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.
Create a 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.
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="https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"/>      <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="https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"/>    <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
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Methods
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?