DYK your website can get a dark mode toggled by your operating system?

Your website can have a light and dark mode that is automatically toggled by your operation system (OS) or browser.

Making your website dark

Here is the trick: You can use the new prefers-color-scheme media query feature, specified in the Media Queries Level 5.

You simply include a CSS like this:

@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
}

This would e.g. just do some simple CSS changes on the colors on your body.

Via JavaScript?

You can also request the status of this property (just like any other media query) with .matchMedia(). This e.g. returns the status:

> window.matchMedia("(prefers-color-scheme: dark)").matches
false

(In this example, the dark mode would be disabled.)

There is a catch, is not there?

Yes, as with many good things, there are some restrictions here…

This feature is only supported by Safari 12.1 and Firefox 67, but I guess browser support will grow, as it is standardized.

Tips

• There is a nice blog article by Andy Clarke about how to design/adjust your website properly for that dark mode.
• For the just recently released Firefox 67, I've created an add-on called “Dark Website Forcer” that you can use to toggle that setting directly in your browser. Note it has some restrictions on what it can do (see the add-on description), and feel free to urge Mozilla for a better API. Of course it's open-source.