Easy Dark Mode With CSS variables

Published on Mar 3, 2021

Reading time: 1 min

I’ve found out a lot of ways of implementing a dark mode in your site. Both with Javascript and CSS. Today I’m going to share a method which doesn’t allow it to be toggled with a button but it’s the easiest way I’ve found.

For achieving this we are going to use the prefers-color-scheme media feature, which is used to detect if the user has requested to use a light or dark theme, and :root for setting global variables in CSS.

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212; // This is how we define a variable in CSS
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --bg-color: #FFFFFF;
    }
}

Then in any part of the site we have to use the --bg-color variable with var() like this:

body {
    background-color: var(--bg-color);
}

You can check support for prefers-color-scheme in Can I Use?

Wrap up

I hope you will find this blog post useful and keep it handy for a quick reference. Feel free to send me a DM or to mention me on Twitter if you’ve got any suggestion or fix :)

Edit this page on Github

Share this Article

Comments

utteranc.es uses Github Issues, no data is stored.
You can disable it from your authorized apps.