DEV Community

Cover image for Y'all Got Anymore of That Dark Mode? Examples and Inspiration - Websites using Dark Mode Via Prefers-Color-Scheme: Dark
Colin McDermott
Colin McDermott

Posted on • Updated on

Y'all Got Anymore of That Dark Mode? Examples and Inspiration - Websites using Dark Mode Via Prefers-Color-Scheme: Dark

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

Duck Duck Go - Light

Okay, now dark:

Duck Duck Go - 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.

Duck Duck Go - Dark mode SERPs

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

Gridsome

stuffandnonsense.co.uk

Alt Text

dumbfunded.co.uk

Dumb Funded

jgthms.com

Jeremy Thomas

rymc.io

Ryan McGrath

overreacted.io

Overreacted

hasnayeen.dev

Nehal Hasnayeen

paulglushak.com

Paul Glushak

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

Top comments (8)

Collapse
 
sykrish profile image
Stefan van Delft

docs.docker.com/
docs.microsoft.com/en-us/azure/sto... (only shows the theme switch icon when you're not on the doc's homepage)
hexdocs.pm/elixir/Tuple.html#content (at the bottom of the page)

Collapse
 
hxii profile image
Paul (hxii) Glushak

I am so grateful for this media query! It's a shame more people don't use it.
I use it with my website as well.

Collapse
 
colinmcdermott profile image
Colin McDermott • Edited

I searched for over an hour and really struggled to find any examples! I added your site Paul, hope that is okay. Thanks for your comment.

Collapse
 
hxii profile image
Paul (hxii) Glushak

Sure thing! It really is a shame since it simplifies adding dark mode to your website without touching JS.

Collapse
 
hasnayeen profile image
Nehal Hasnayeen

I know of this two
gridsome.org/
overreacted.io/

Collapse
 
colinmcdermott profile image
Colin McDermott

Thanks Nehal! I really appreciate that. I will add them ASAP.

Collapse
 
hasnayeen profile image
Nehal Hasnayeen

Lol I forgot that I've also used it in my site 😂
hasnayeen.dev/

Thread Thread
 
colinmcdermott profile image
Colin McDermott

Nice! Added.