Lately, a lot of platforms have added a dedicated dark mode in their UI, Apple even touts it as one of the top new features in iOS 13. In this blog post, we're going to take a look at how you can easily add dark mode to your web apps, and how it fits into the grand scheme of accessibility for your application.

Turn this

Into this

That looks awesome! How do I get it?

well, it's pretty simple, you just add some css to your app inside a media query, and that's it.

@media (prefers-color-scheme: dark) {
  /*add dark mode specific rules here*/
}

The prefers-color-scheme media query allows you to set different styling rules depending on whether the user is on dark mode, light mode, or has no preference.

Where is this preference coming from?

On iOS, as we already mentioned, there's a system-wide Dark mode since version 13. Windows 10 also gives its users the option to choose between light and dark for the entire system. Android doesn't have system-wide dark mode yet, but you can enable it on a per-app basis. Chrome for Android, for instance, has a setting for this.

Why is this important?

The prefers-color-scheme media query is a nice way to make your app feel more integrated in the system it's running on. But aside from this, there are a couple more media queries that can make your app feel more tailored to each user:

Note: Most of these features are still experimental at the time of writing, and as such, may not yet be supported by many browsers.

• prefers-reduced-motion: people who are sensitive to motion tend to like it a bit calmer (think ADHD, hypersensitivity or even people susceptible to seizures)
• prefers-contrast, prefers-reduced-transparency and forced-colors: people with limited vision often have issues with low contrast and translucent objects, and some OSes even allow you to choose forced black and white mode.