Hund

How to add automatic dark mode for your website using plain CSS

Saturday, December 26, 2020

Adding an automatic dark mode for your website using plain CSS is simple. Dark mode is not something that I use myself—it’s actually worse for your eyes—but it was requested by multiple readers, so I decided to add it to my website. It’s only a few lines of CSS anyway.

This is what you need to add to your style sheet:

@media (prefers-color-scheme: dark) {
}

You then add any CSS-rule in there for the things you want to change when the dark mode is enabled. For an example, let’s say you want a black background with white ext instead of the regular white background with black text:

@media (prefers-color-scheme: dark) {
    html {
        background: #111;
        color: #fff;
    }
}

That’s it!

Meta

Feedback

If you want to leave any feedback, feel free do so by either sending me a message via e-mail, XMPP or IRC.