Y'all Got Anymore of That Dark Mode? Examples and Inspiration - Websites using Dark Mode Via Prefers-Color-Scheme: Dark
Tags: webdev, css, design, darkmode
Published: 2020-01-15 11:33:10

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: <code>prefers-color-scheme: dark</code>

<pre>@media (prefers-color-scheme: dark) {

DARK MODE CSS GOES HERE!

}</pre>

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

<a href="https://caniuse.com/#search=prefers-color-scheme">Support</a> 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.

<h2><a href="https://duckduckgo.com/">duckduckgo.com</a></h2>

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

![Duck Duck Go - Light](https://thepracticaldev.s3.amazonaws.com/i/y7t7vr2ykdsdu8qcaz8i.PNG)

Okay, now dark:

![Duck Duck Go - Dark](https://thepracticaldev.s3.amazonaws.com/i/o5vqhs7ig11o4mvc3zxc.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/e3r23i45bfkvry6rzw9d.PNG)

*Note: Google search does not officially have a dark mode at the time of writing - you will need to use an <a href="https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en-US">app</a> or similar.*

<h2><a href="https://gridsome.org/">gridsome.org</a></h2>

![Gridsome](https://thepracticaldev.s3.amazonaws.com/i/6yyvo5ap69dh819chw14.PNG)

<h2><a href="https://stuffandnonsense.co.uk/">stuffandnonsense.co.uk</a></h2>

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/28pg358ckx52w9e4e595.png)

<h2><a href="https://www.dumbfunded.co.uk/">dumbfunded.co.uk</a></h2>

![Dumb Funded](https://thepracticaldev.s3.amazonaws.com/i/squh99c2e9gh05cibjhk.PNG)

<h2><a href="https://jgthms.com/">jgthms.com</a></h2>

![Jeremy Thomas](https://thepracticaldev.s3.amazonaws.com/i/uhwkohibfo2gd1i9gv56.PNG)

<h2><a href="https://rymc.io/">rymc.io</a></h2>

![Ryan McGrath](https://thepracticaldev.s3.amazonaws.com/i/6nj9ehjhlz7zqrkzqrmf.PNG)

<h2><a href="https://overreacted.io/">overreacted.io</a></h2>

![Overreacted](https://thepracticaldev.s3.amazonaws.com/i/l4h75qlv4m4kpkfezilc.PNG)

<h2><a href="https://www.hasnayeen.dev/">hasnayeen.dev</a></h2>

![Nehal Hasnayeen](https://thepracticaldev.s3.amazonaws.com/i/r2soejo2bkwc1hwf76sq.png)

<h2><a href="https://paulglushak.com/">paulglushak.com</a>

![Paul Glushak](https://thepracticaldev.s3.amazonaws.com/i/h89nfbm2m7exyvkzioix.png)


If you know of, or have a site that uses <code>prefers-color-scheme: dark</code> please let me know in the comments or tweet <a href="https://twitter.com/colinmcdermott">@colinmcdermott</a>.

> <a href="https://dev.to/colinmcdermott/darkmode-hacks-1-inverted-images-jga">Darkmode Hacks #1: Inverted Images</a>