Skip to content

Quick tip: Automatically detect Dark Mode with CSS!

joeattardi profile image Joe Attardi twitter logo github logo ・1 min read

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!

twitter logo DISCUSS
markdown guide
Classic DEV Post from Aug 6 '19

What to put in your portfolio as a beginner web dev

Joe Attardi profile image
JavaScript wrangler. Check out my new book, Modern CSS!