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.
Top comments (0)