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!
}

Hope this helps you develop better UIs!