Dark Mode for your website (CSS)

Since the release of macOS 10.14 in 2018, Mac users have been able to switch between two color schemes: the (default) Light color scheme, and a new (dark) scheme, better known as Dark Mode (see also).

Dark mode in macOS
Dark mode in macOS

With the introduction of Dark Mode, more and more websites have started to use a media query to serve Dark Mode users with a different CSS styling.

This can be achieved with a relatively simple media query, that is supported by many browsers (including Chrome, Safari and Firefox):

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

The video below shows an example of what happens when a user switches between Light and Dark appearance in macOS (using Chrome):