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!

Top comments (0)