What’s the Deal With Dark Mode, Anyway?
When he thinks back on it, software developer Erik Dietrich figures he spent a not-insignificant number of hours configuring his code editors’ color schemes back in the 2000s.
At the time, code editors and integrated development environments (IDEs) didn’t offer a lot of options for themes, and existing ones often needed custom adjustments. Dietrich used Eclipse, a leading IDE for the popular Java programming language.
“IDEs typically have what’s known as syntax highlighting — different kinds of concepts in the language are different colors by default,” he said. “The trouble is, if you want to make the background black, now you’ve got all these brick-red and dark-green colors against that. So you’d have to go through the settings and change everything from brick red to bright red.”
Syntax highlighting presents different parts of the code in different colors, making it easier to identify function names and variable types, for example. But colors were usually optimized for a light background and only came half-baked for dark backgrounds.
“Twenty years ago, people in the programming community viewed doing stuff in Windows as kind of less technical.”
“So it would really be this multi-hour affair of just tweaking all these things,” Dietrich said. “I’d have to do that every time I installed a new version of Eclipse.... After a while, it became almost more work because I was working on more machines and more versions — but it never occurred to me to stop doing it, because you get attached to the way you’ve been doing things.”
He had learned to love the dark aesthetic in college, where the majority of coding tools he used, like Emacs and VI, featured light text on a dark background. The school’s computer labs had Linux machines, whose default light-on-dark command-line tools harkened back to the pre-graphical user interface days.
“Windows didn’t initially have the aesthetic. That was the Linux and Unix aesthetic — the green or white on black,” Dietrich said. “Twenty years ago, people in the programming community viewed doing stuff in Windows as kind of less technical. ... [So] I think there was an element, when I was younger, of vanity — ‘This is how real techies customize it!’”
White Screens Are Nothing Like White Pages
The battle between light and dark mode has been waging for years, but the tide seems to be turning in the favor of dark mode — at least in terms of popularity. Today, most applications offer dark mode as what Dietrich calls a “first-class” theme, fully supported and easy to switch to. If not, don’t panic — there is probably already a Change.org petition advocating for it.
However, dark mode doesn’t seem to be better for focus. Earlier this year, Raluca Budiu, director of research at UI/UX consulting firm Nielsen Norman Group, wrote a review of the existing academic research on the topic. Recent research concluded that users in light mode generally performed better at visual-acuity tasks — like those reading tests performed at the optometrist — and proofreading tasks than users in dark mode, although individuals with low vision may experience some benefits from dark mode.
But research into this topic is sparse, and it doesn’t help that reading from a computer screen is fundamentally different from reading text on paper, which means that conclusions from regular color theory don’t carry over to digital.
“Reflective and transmissive colors are completely different,” said user experience design consultant Steven Hoober, who wrote about designing for dark mode earlier this year. He said that light mode was designed “just like a piece of paper, but it doesn’t look right because it’s what’s called transmissive color — it’s emitting light.”
Hoober said there are other industries that face the same issues, like regulations that set standards for motor vehicle tail lights which also don’t have equivalents in RGB color.
“Reflective and transmissive colors are completely different.”
“There are problems translating colors from one style to the other, we make a lot of assumptions about that that are not true,” he said. “A lot of the design that we see, when we see troublesome design — things that are really pretty and trendy, like lots of low-contrast gray stuff — is print design being translated to digital, but it doesn’t really work for a whole bunch of reasons.”
For designers like Hoober, creating a dark theme for an application involves considerations of readability and accessibility. One of the key concepts that determine readability is contrast: the difference in color between the text and the background. But color itself is more complex than most people realize.
“Color is fundamentally defined in three different ways: hue, saturation and brightness,” Hoober said. “‘Hue’ is what I call the spectrum, the rainbow part. Red versus green are not colors, they’re hues.”
Saturation is how much of the hue there is, and brightness is determined by how much white or black is mixed with the hue. All three need to be taken into account when reviewing a design’s contrast.
“It’s considering the entire thing,” Hoober said. “You can’t just change from red to green and not adapt the contrast. They all interact with each other.”
He said alerts are components that often need custom adjustment in dark mode designs.
“A pretty typical one that I deal with constantly is the little warning icon — like an exclamation mark inside of a red triangle, or an info little ‘i’ inside of a blue circle,” Hoober said.
Although designers like to keep those kinds of colors consistent, a change in background color will often require different icon colors because of problems with low contrast. There are other things designers can do to improve readability as well, such as increasing the size of text and icons, moving items further apart and using shapes to convey differences.
“You can redesign for the lower contrast if you want,” Hoober said. “Everything is a trade-off. You can trade size for contrast ... proximity, shape of things.”
Dark Mode Needs to Consider Accessibility Too
Eric Bailey, who works with The A11Y Project, an open-source site that provides accessibility resources, said it’s important for creators of software to give users the option of selecting the mode they want to use.
“Just give people choice,” Bailey said. “It’s nice to have [dark mode], but give me the ability to toggle it on and off if you’re going to do it, because you don’t know my circumstances.”
He said designers should keep in mind that it is just as important to follow accessibility standards when designing for dark mode as it is for light mode.
“From an accessibility perspective, dark mode doesn’t exempt you from the Web Content Accessibility Guidelines around contrast for color,” Bailey said. “Just make sure that your dark mode theme is compliant the same way your light mode theme would be.”
Hoober said it’s not difficult for developers to check their own software for compliance with accessibility standards.
“Just make sure that your dark mode theme is compliant the same way your light mode theme would be.”
Although Erik Dietrich first gravitated toward dark mode due to an aesthetic preference, these days he also prefers it because he feels less eye strain when using applications in dark mode.
“I never get that tiredness feeling if I’ve got three Visual Studio windows open and they’re all dark,” Dietrich said. “It’s only when I’m in the browser reading things that are black on white.”
He bought himself a pair of blue-light blocking glasses and adjusted the settings on his monitor to emit less blue light, but, if it’s available for the application, he also won’t say no to dark mode.