How to Create a Dark / Light Mode for Websites using CSS


By changing the text-color and background color of a page, we can add dark/light mode for our website.

Syntax

The following syntax can be used to apply dark mode.

Selector {
   color: white;
   background-color: black
}

Example

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            font-size: 1.4em;
            text-align: center;
         }
         .dark {
            color: white;
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div>
         <p>Suspendisse eget finibus nulla, a pulvinar est. Suspendisse eget eleifend nibh. In nec massa molestie, vehicula sapien a, consectetur nunc. Aenean at nisl vulputate mi scelerisque commodo nec et mauris. Duis tincidunt auctor posuere.</p>
         <button id="btn" onclick="change()">Normal Mode</button>
      </div>
      <script>
         let btnText = document.getElementById("btn");
         function change() {
            let btn = document.body;
            btn.classList.toggle("dark");
            if (btnText.innerHTML === "Normal Mode") {
               btnText.innerHTML = "Dark Mode!";
            } else {
               btnText.innerHTML = "Normal Mode";
            }}
      </script>
   </body>
</html>

This gives the following output

Example

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            font-size: 1.4em;
            text-align: center;
         }
         .dark {
            color: white;
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div>
         <button id="btn" onclick="change()">Normal Mode</button>
         <p>Duis tincidunt auctor posuere.</p>
         <img src="https://images.unsplash.com/photo-1610718055968-4e3cf23d96db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" />
      </div>
      <script>
         let btnText = document.getElementById("btn");
         function change() {
            let btn = document.body;
               btn.classList.toggle("dark");
               if (btnText.innerHTML === "Normal Mode") {
                  btnText.innerHTML = "Dark Mode!";
               } else {
                  btnText.innerHTML = "Normal Mode";
            }}
      </script>
   </body>
</html>

This gives the following output

 

Updated on: 10-Feb-2021

448 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements