Easy dark mode for your website or web app
Last week, I added a dark mode to Go Make Things, the Vanilla JS Toolkit, and the Lean Web.
Today, I want to show you how I did it.
How dark mode works
Every now and then, you see a site with an option to toggle dark mode on or off. Twitter comes to mind.
Based on the presence of a .dark-mode
class on the document
, the styles in the stylesheet will change.
body {
color: #272727;
}
.dark-mode body {
background-color: #272727;
color: #ffffff;
}
That approach requires you to…
- Setup a toggle of some sort—a checkbox, radio buttons, a dropdown or a select menu.
- Detect changes to the setting, and add a class to the
document
element. - Save the user’s preference in
localStorage
. - On page load, check for the user’s preference in
localStorage
and preload the dark mode class onto thedocument
.
I am in many ways a lazy developer, and wanted something a bit more automated.
I like the way many apps will automatically detect if you have Dark Mode enabled in your OS and change their color scheme accordingly. Chrome and Firefox do this. Microsoft’s To Do app does it. All of Apple’s apps do it, too.
Automatic dark mode
The general approach to automatically turning dark mode on or off based on the user’s OS preferences is basically the same.
But instead of using a class, we can use a media query: prefers-color-scheme: dark
.
body {
color: #272727;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #272727;
color: #ffffff;
}
}
And that’s it. No JavaScript required!