Darkmode in CSS

You may know the dark mode from your mobile phone or elsewhere. It’s basically a theme that can be activated, but also can be a system-wide default.

Most browsers do also support this setting - and we as web developers can read these preferences (Firefox) and use media queries to apply a dark theme for our website.

Note that this is not togglable, as some JavaScript solutions offer this feature, but only reacting to the browser preference. By the way - I removed all JavaScript from this blog.

I did it for this blog, and all I had to do, was to add a SCSS File containing a media query:

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

and also some other styles. Handling everything and giving it some polish will take some time - but the basics are quite easy to achieve.