DEV Community

loading...
Cover image for Easy dark theme with CSS only

Easy dark theme with CSS only

jae profile image Jae Beojkkoch ・1 min read

Today, I'm going to show you how to add a simple dark theme do your website.

First, we have something like this, light theme by default.
Light theme of the website
The light theme corresponds to this in CSS:

body {
    background-color: #FFF;
    color: #212121;
}
Enter fullscreen mode Exit fullscreen mode

Now, let's make a dark theme by default!
It is fairly simple to do, just change your background-color and color to the values you need for your dark theme (don't forget links as well if you already don't have theming for those).

For instance:

body {
    background-color: #212121;
    color: #FFF;
}
a {
    color: #F57C00;
}
Enter fullscreen mode Exit fullscreen mode

Which will give this by default.
Default dark theme

Sweet, but now we want people to still be able to see the light them if they selected it.
To achieve that, just add @media screen and (prefers-color-scheme: light) around your light theme CSS.
For instance:

@media screen and (prefers-color-scheme: light) {
    body {
        background-color: #FFF;
        color: #212121;
    }
    a {
        color: #7E57C2;
    }
}
Enter fullscreen mode Exit fullscreen mode

And voilà, you have now a website that supports light and dark themes 🎉

Dark Theme loop

Discussion (0)

pic
Editor guide