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.
You can follow me if you’re interested in learning full-stack development quick tricks using JavaScript.
Thanks for watching.
Top comments (1)
Great explanation! thanks for sharing