Apply dark theme to your site using prefers-color-scheme

javascript css

I recently noticed tweet by v8 team that said they have introduced dark theme for v8.dev based on users operating system set theme. I has surprised by it so I did a little digging to see how it works. I did find an awesome css media query called prefers-color-scheme which is surprisingly easy to use.

To apply dark theme to your website if your os set to dark you can use the media query

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

Similarly for light theme you could use the media query

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

Here is a sample demo of this https://rafi993.github.io/prefered-color-theme/

try switching your OS dark and light color theme to see this.

Alt Text

Alt Text

This post is also available on DEV.