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.
Top comments (4)
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?
Here's a more complete tutorial on dark mode.
I hope that helps!