In this article, we are going to learn how to make dark mode for websites using HTML, CSS, and Javascript, Light-on-dark color scheme, also called black mode, dark mode, dark theme, or night mode.
In this mode, light-colored text, and 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 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>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() { 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>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:
