Dark Mode Usability and Expectations ⇥ nngroup.com

Tanner Kohler and Amy Zhang, of the Nielsen Norman Group:

Dark mode is more popular than ever. You might even think it’s essential — at least if you were to read many of the web-design articles devoted to the topic. However, it takes valuable time and resources to fully support dark mode and “wear it well” because most designs are built in light mode first. To understand how much dark mode impacts users, we recently conducted a survey and some mobile usability-testing sessions in dark mode on mobile.

In all cases, the best thing you can do is mirror a user’s preferences and the system default. On the web, this can be achieved very simply by using CSS variables to define page colours for light mode, and then use a prefers-color-scheme: dark media query to redefine those same variables for dark mode. (Or, if you prefer, the other way around.)

One finding I was surprised by is how many people surveyed by the NNG did not notice when an app violated their preference by showing a light-mode screen when it should have been in dark mode or vice-versa. For many, it seems dark mode is mostly an aesthetic preference, though the NNG notes some possible benefits for those with visual disabilities.