Use “prefers-color-scheme” to detect macOS dark mode with CSS and Javascript

Jonas Duri
3 min readJan 22, 2019

Since the introduction in MacOS Mojave “Dark Mode” has made its way to the mainstream.

If a user chooses to use “Dark Mode” the overall experience of the OS adapts to provide a consistent user experience.

Many companies introduced a dark theme for their apps in 2018. Spark, Things 3, Sketch or Ulysses to name a few.

There is a website that has a comprehensive list of many more apps and websites.

In this post, I’m going to explain how and why you should consider making a dark theme for your website too.

October 2019 — Update: Rowland I. Ekemezie has a great article related to “Dark Mode” with the focus on Sass.

Dark Mode for the Web

There are reasons why a person might prefer a dark theme over a light one.

  • It reduces stress on the eyes when reading in a dark environment.
  • Dark mode is enjoyable to look at.
  • It can save battery when using an OLED screen.
  • Better contrast.
  • Less Blue Light which supports a better sleep

Developers should build software that respects a user's decision for a certain user experience.

The problem is that there is currently no available cross-browser API to tell if a user has “Dark Mode”…



Jonas Duri

Platform Architect working on frontend & UI solutions for distributed e-commerce systems |