My website has moved to a new address: hund.tty1.se

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

Hund

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

Saturday, December 26, 2020

My website has moved to a new address: hund.tty1.se

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 feedback, you can do so by sending me a message via e-mail.