How to quickly Add Dark Mode to your web app in just 3 steps

Abdul Wahab ⚡️ — Mon, 01 Aug 2022 07:33:06 +0000

Dark mode is cool, sleek, and has now become a necessary ingredient in our apps, all the modern-day apps have this feature and nearly 85% of users prefer to use it.

In this post, we are going to learn quick implementation of the dark mode using dark-mode-toggle in our web apps.

Step 1: Import and Add the dark toggle component

Let's import and add the web component of dark toggle from ChromeLab.

//Import Script
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>

//Toggle component
<dark-mode-toggle
  id="dark-mode-toggle-1"
  appearance="toggle"
  dark="Dark"
  light="Light">
</dark-mode-toggle>

Let's add them to your index.html

//index.html
<html lang="en">
  <head>
    <title>Dark mode demo app</title>
    <script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="header">
      <h1>Hi there, let us do a quick implementation of dark mode!!</h1>
      <dark-mode-toggle
        id="dark-mode-toggle-1"
        appearance="toggle"
        dark="Dark"
        light="Light"
      ></dark-mode-toggle>
    </header>
    <img
      src="https://i.postimg.cc/mDDBx3G8/photo-1546587348-d12660c30c50.jpg"
      alt="Nature"
      width="320"
      height="195"
    />
    <p>Check out the dark mode toggle in the top right corner!</p>
  </body>
</html>

The result will look like this

Step 2: Create two separate CSS files for dark and light modes

Now create two separate CSS files, let's say dark.css and light.css, and link them to your index.html

//light.css
html {
  background: #fff;
  color: #08090a;
}

//dark.css
html {
  color: #fff;
  background: #08090a;
}

//index.html
<html lang="en">
  <head>
    <script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="light.css"
      media="(prefers-color-scheme: light)"
    />
    <link
      rel="stylesheet"
      href="dark.css"
      media="(prefers-color-scheme: dark)"
    />
  </head>
  <body>...

Here you can see that both of the <link> have this media property which is using prefers-color-scheme light or dark.

Now you should be able to switch the color modes 🎉🎉🎉

but wait... It's not actually updating the inputs, let's solve this puzzle now 🤞

Step 3: Add an event listener to listen to color scheme changes

Now we need to add an event listener in our javascript file which will listen to color scheme changes and apply changes to our root element.

//script.js
document.addEventListener('colorschemechange', (e) => {})

Let's assign the style property color scheme to our root element

//script.js
document.addEventListener("colorschemechange", (event) => {
  document.documentElement.style.setProperty(
    "color-scheme",
    event.detail.colorScheme
  );
});

Now you can see that all the inputs in our app also reflect on the dark/light modes toggle.

I hope you enjoyed the guide.

Code snippet
Demo app

You can follow me if you’re interested in learning full-stack development quick tricks using JavaScript.

Thanks for watching.

DEV Community: Abdul Wahab ⚡️

How to quickly Add Dark Mode to your web app in just 3 steps

Step 1: Import and Add the dark toggle component

Step 2: Create two separate CSS files for dark and light modes

Step 3: Add an event listener to listen to color scheme changes