If you’re a developer, chances are you have a penchant for dark mode. Staring at a screen all day and possibly part of the night, dark mode is easier on the eyes and it just looks awesome.
It might surprise some of you to know that CSS has native support for dark mode and styling specifics using a property called prefers-color-scheme.
@media (prefers-color-scheme: dark) {
/* paint it black */
}The best thing about prefers-color-scheme is that it is well-supported. If you do not have to support Internet Explorer, then you can use it and not have to worry about any polyfills or Javascript fallbacks.
To enable native Dark Mode if you’re using Windows 10, go to the personalization screen and choose default app mode to be dark. The latest version of macOS also supports OS-level dark mode as well.
It might surprise you to know (if you don’t already have dark mode enabled) that this blog has a dark mode theme and it is just a few lines of CSS to pull it off.
@media (prefers-color-scheme: dark) {
body {
background: #0D1219;
color: #FFF;
}
.site-title a,
.genesis-nav-menu a,
.entry-title a {
color: #FFF;
}
}That is the dark theme for this site. Simple and effective. And in case you still haven’t enabled native dark mode just yet this is what this blog post looks like with dark mode enabled.
No Javascript or fancy tricks needed, just good ol’ fashioned CSS.
