DEV Community

Joe Attardi
Joe Attardi

Posted on

Quick tip: Automatically detect Dark Mode with CSS!

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!

Discussion (0)