DEV Community

Cover image for How to implement Dark Mode in CSS with @media
Joel Varty
Joel Varty

Posted on • Updated on

How to implement Dark Mode in CSS with @media

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) {

}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

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.

Collapse
 
joelvarty profile image
Joel Varty

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.

Collapse
 
anwar_nairi profile image
Anwar • Edited

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?

Thread Thread
 
joelvarty profile image
Joel Varty