Quick tip: Automatically detect Dark Mode with CSS!

Joe Attardi - Feb 28 '20 - - Dev Community

Just a quick tip I discovered recently.

You probably already know that macOS and iOS (and perhaps others) support dark mode. What you might not know is that you can detect this with a CSS media query!

Just use this media query:

@media (prefers-color-scheme: dark) {
  // rules in here will only be applied if the user's OS is in dark mode!
}
Enter fullscreen mode Exit fullscreen mode

Hope this helps you develop better UIs!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player