DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to quickly Add Dark Mode to your web app in just 3 steps
Abdul Wahab ⚑️
Abdul Wahab ⚑️

Posted on

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

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>
Enter fullscreen mode Exit fullscreen mode
//Toggle component
<dark-mode-toggle
  id="dark-mode-toggle-1"
  appearance="toggle"
  dark="Dark"
  light="Light">
</dark-mode-toggle>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The result will look like this

dark mode toggle


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;
}
Enter fullscreen mode Exit fullscreen mode
//dark.css
html {
  color: #fff;
  background: #08090a;
}
Enter fullscreen mode Exit fullscreen mode
//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>...
Enter fullscreen mode Exit fullscreen mode

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 πŸŽ‰πŸŽ‰πŸŽ‰

dark mode partial implementation

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) => {})
Enter fullscreen mode Exit fullscreen mode

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
  );
});
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
pixiebrix profile image
pixiebrix

Great explanation! thanks for sharing

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.