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.
Top comments (8)
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)
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.
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.
Sure thing! It really is a shame since it simplifies adding dark mode to your website without touching JS.
I know of this two
gridsome.org/
overreacted.io/
Thanks Nehal! I really appreciate that. I will add them ASAP.
Lol I forgot that I've also used it in my site 😂
hasnayeen.dev/
Nice! Added.