Dark mode has been a trending wave in UI design for a while now. Customarily I took a good part out of my day yesterday to implement that on my blog (post soon).
While researching ways to implement it, I came across the prefers-color-scheme css media feature which allows you to get the user theme preference on the Operating System level.
You use it just like you use any other media query. It has two possible values to check against light and dark.
@media (prefers-color-scheme: dark) {
/* Dark theme styles go here */
}
@media (prefers-color-scheme: light) {
/* Light theme styles go here */
}So you can do something cool like show a cool animation for users who prefer dark mode like Nikita does in his site here. Cool right!
It has support on major browsers apart from I.E.
See who does and who doesn't support it at Can I Use.
Read more about it on MDN.
Now go make cool things!