How to Make a Quick and Dirty Dark Mode for Your Website
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.

Hey there, I'm Matt!
I'm a UI/UX designer at NMI and I make videos over on A Better Computer, which I think you'll love.

Hey there, I'm Matt!
I'm a UI/UX designer at NMI and I make videos over on A Better Computer, which I think you'll love. You can also check out my side projects, Quick Reviews and Quick BIN Lookup.