Here is the simplest way I found to add dark mode to a project:
Add a toggle button in your HTML with a checkbox and an onClick calling a JavaScript function
<label id="toggle">
<input type="checkbox" onclick="toggleDarkMode(event)">
<span id="slider"></span>
</label>
Then add a data-mode to your CSS with your CSS variables set to the dark mode colors
:root {
font-size: 10px;
--bg: white;
--font-color: black;
--btn-bg: black;
--btn-color: white;
}
[data-mode="dark"] {
--bg: black;
--font-color: white;
--btn-bg: white;
--btn-color: black;
}
Now all you have left is to write the JavaScript function to set or remove the data-mode
function toggleDarkMode(event) {
const isDarkmode = event.target.checked
if (isDarkmode) {
document.documentElement.setAttribute('data-mode', 'dark')
} else {
document.documentElement.setAttribute('data-mode', '')
}
}
Then you can add some CSS to make the button look better and add a transition
:root {
font-size: 10px;
--bg: white;
--font-color: black;
--btn-bg: black;
--btn-color: white;
}
[data-mode="dark"] {
--bg: black;
--font-color: white;
--btn-bg: white;
--btn-color: black;
}
body {
width: 100vw;
font-size: 2rem;
background-color: var(--bg);
color: var(--font-color);
}
#toggle {
margin-right: 2rem;
width: 6rem;
height: 3.4rem;
border-radius: 3rem;
background-color: var(--btn-bg);
}
#toggle input {
opacity: 0;
width: 0;
height: 0;
}
#slider {
position: absolute;
z-index: 5;
cursor: pointer;
height: 2.5rem;
width: 2.5rem;
top: 1.23rem;
right: 1.8rem;
border-radius: 3rem;
background-color: var(--btn-color);
transition: ease-in .2s;
}
#slider.dark {
right: 4.2rem;
}
Here is the end result:
Top comments (25)
In addition you can implement
prefers-color-schememedia queries to also trigger dark mode, if this is set in user preferences: developer.mozilla.org/en-US/docs/W...I also read somewhere that you can also hook into the ambient sensor of the laptop.
Not sure if the following was the original published source but that's where I read it.
blog.arnellebalane.com/using-the-a...
That's awesome!
Do you have a link to your code? The code I posted in the article are only the parts of the code that have to do with dark/light mode.
Love the way this dark/light mode functions.
Also, seriously cool cover image for this post. 😀
Thanks 😁!
This is slick. Similar to how DEV does it but this is more elegant.
Thank you for the kind words!
I use dark mode too. But your method is more simple and straightforward.
I added the codepen at the bottom of the article.
But what about IE? Aren't CSS variables not supported in that unsightly browser?
That's pretty slick.
OnClick the C needs to be capitalized
This is pretty awesome. So cool seeing such an easy way to implement such a highly requested feature in many applications.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.