How to Make a Quick and Dirty Dark Mode for Your Website

September 30, 2019 - 1 minute read time

You can find this all over the web these days, but dark mode is important and I figured I’d share in one more place how easy it can be to get your site up and running in no time. Here’s all the code it takes to do dark mode here on BirchTree.


/* DARK MODE */

@media (prefers-color-scheme: dark) {
html {
background-color: #0e0e0e;
color: white;
}
.site-title a {
text-shadow: 3px 3px #ffffff;
}
}

That’s it! Now I made it easier on myself for having white cards so post content doesn’t need to change it all, but that’s only a few more lines. Make it simple, make it quick, and don’t use pure black as your background.

Oh yeah, and it works in all major browsers.