For those of us who value the health of our retinas during those 1am coding sessions (or 24 hours a day: #DarkModeIsLife) - dark mode is a life-saver and has come on leaps and bounds over the last couple of years in terms of adoption.

Thanks to a relatively simple bit of CSS it is now possible to add dark mode to your site with just a few lines of code.

Specifically there is a new Media Query: prefers-color-scheme: dark

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

DARK MODE CSS GOES HERE!

}

If a user has dark-mode enabled in their OS, then the site should automatically display in dark mode.

Support is fairly wide among browsers, though IE/Edge hasn't adopted it yet.

This post is not designed to be a full tutorial (try Googling "prefers-color-scheme: dark").

What I wanted to do was collect up some examples of great website dark modes.

duckduckgo.com

First, let's 'see the light' (mode).

Okay, now dark:

Pretty nice. I like how they have also edited the illustration to really push home the idea of a chilled evening.

You can see even the picture on the back of the wall has changed, from day 🌞 to night 🌜

The dark mode theme extends through to the actual search results pages.

Note: Google search does not officially have a dark mode at the time of writing - you will need to use an app or similar.

gridsome.org

stuffandnonsense.co.uk

dumbfunded.co.uk

jgthms.com

rymc.io

overreacted.io

hasnayeen.dev

paulglushak.com

If you know of, or have a site that uses prefers-color-scheme: dark please let me know in the comments or tweet @colinmcdermott.

Darkmode Hacks #1: Inverted Images