How to implement Dark Mode in CSS with @media

twitter logo github logo Updated on ・1 min read

Dark mode is a really popular feature in both Windows and MacOS, as well as iOS devices, too.

Now, with the latest browsers on these OSes, you can deliver the dark mode experience on your website or webview based app as well.

It's as simple as encapsulating all the dark mode overrides in a spefic media query that ONLY activates when dark mode is detected on the browser's OS.

Here it is:

@media (prefers-color-scheme: dark) {

}

I hope that helps a few folks get dark mode implemented on their website or app!

...

Want more? I wrote a full tutorial here that walks you through a longer process of actually implementing a dark mode theme using npm and bulma.

twitter logo DISCUSS (4)
markdown guide
 

The title is kind of misleading; one might expect this post to actually explain how to implement dark mode, not just announce the (old news, btw.) media query that tells you whether the user prefers dark mode or not. Also it's certainly not a tutorial.

 

I'm not sure what you were looking for - if there's more you think I should add to this piece, please let me know :)

This is (albeit) short tutorial on what to add to your CSS to detect dark mode. I had questions on this from colleagues yesterday, so I wrote this quick (and I hope fun) article to show the @media query necessary to do that.

 

Nice article, I did not knew this property yet, very cool!

I would agree on the fact that the title can mislead people into thinking this will be a tutorial on how to actually implement a dark mode on a web app/page, do you think switching to "How to detect dark mode preference" would clarify this article goal?

Classic DEV Post from Jul 17

What are you (still) not interested in learning?

I'm interested in hearing not only what you are *not* interested in learning. But if you answered the question last time, has anything changed?

Joel Varty profile image
President at Agility CMS. I've done a ton of backend dev using .Net. I support JAMStack devs πŸ’―. I think Agility CMS is the fastest CMS, and I would know πŸ˜‰