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

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!