Use “prefers-color-scheme” to detect macOS dark mode with CSS and Javascript
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. https://darkmodelist.com/.
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”…
