Birchtree
By Matt Birchler
I've been writing here since 2010! Back when personal blogs were all the rage. Kids, ask your parents.

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.

Show Comments

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.