image/svg+xml

#TIL How to support dark mode in pure CSS

Today I’ve learned how to support dark mode in your website with pure CSS. All this while enabling only it if the client prefers dark mode.

As you might know, dark mode has become the new trend of 2019. Actually, it was the trend around the 2004-2006 when I started fiddling with websites if I recall correctly. But that’s not problem, we love dark mode on everything!

All modern operating systems like Windows 10, Android 10, Mac OS X (and iOS) have a build-in dark mode*. You can enable it in your settings and voilĂ , all your apps, are now in dark mode. But as soon as you navigate in a website you’ll be like…

*Note: Ubuntu and more generally Linux supports all kinds of themes including dark themes, but I can’t find resources about this CSS feature on Linux-based systems, if you have any information about this, please let me know.

Brace yourselves! You can quickly adapt your website to support dynamically the user preference for dark mode. With a simple CSS media query (and some CSS tweaking of course) :

@media (prefers-color-scheme: dark) {
 // Your CSS rules are here
}

If you’re browsing Beldy with a device that supports dark mode, you might have noticed that the website is in dark mode now!

Browser compatibility chart

Other resources

Below are more sources about the subject:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By continuing to use the site, you agree to the use of cookies. More information

The cookie settings on this site are set to "accept cookies" to provide you with the best browsing experience possible. If you continue to use this site without changing your cookie settings or if you click "accept" below, you consent to this.

Close