How to quickly Add Dark Mode to your web app in just 3 steps
Tags: javascript, react, dark, webapp
Published: 2022-08-01 07:33:06

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](https://github.com/GoogleChromeLabs/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.


```javascript 
//Import Script
<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
```
```javascript
//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
```javascript
//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

![dark mode toggle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a1px2dyncjsxqrbyg3c.png)

---

## 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

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

```javascript
//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 🎉🎉🎉 


![dark mode partial implementation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stw5j5xjvdbxme7oec6v.png)

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.

```javascript
//script.js
document.addEventListener('colorschemechange', (e) => {})
```
Let's assign the style property color scheme to our root element

```javascript
//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](https://codesandbox.io/p/github/waahab/Dark-mode-demo-app/draft/youthful-black?create=true&file=%2Flight.css&workspace=%257B%2522activeFileId%2522%253A%2522cl6afes5i0004lmgj0vlcatoo%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522sidekickItems%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A5000%252C%2522key%2522%253A%2522cl6afexgq007i356greuzlwyy%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522key%2522%253A%2522cl6afev5f001u356gt8p5idks%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%252C%2522state%2522%253A%2522SIDEKICK%2522%257D)
>[Demo app](https://5zo39g.csb.app/)

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

Thanks for watching.