White on black or black on white? The pros and cons of Dark Mode

There has been a lot of talk and leaks about Dark Mode for the upcoming WWDC 2019 (Exclusive: Screenshots reveal iOS 13 Dark Mode, new Reminders app, more | 9to5Mac). In the new iOS 13, you can turn on enable Dark Mode in the Settings app or from the option in the control center. According to the image shared in the article, their Music app seems to be using the true black background.

I personally use the Pixel phone from Google. I currently have Pixel 3, my third Pixel device, and I must say that its relatively shorter battery life in comparison to other smartphones has been my headache. Because I wanted to get the most out of my recent trip to LA, I mainly used Lyft rides for transportation, and I was forced to have my laptop open very frequently to charge my phone on each ride to simply keep it stay alive.

During the recent Google I/O, Google thankfully announced that they would include Dark Theme in their new android Q. In fact, I had been using Dark Theme even on my current Android version, but the one with Q seems to take it even further. For example, the dark background color is or is at least closer to pure black than the current dark gray; more elements, such as notification bubbles, are also in the dark background, unlike the current version. Google is influencing more Android apps to adopt dark themes.

Computer screens actually started with the white text on black background in earlier days

The Apple II Plus, introduced in 1979 (Image source: Maric Wichary via Flickr)

Old computer screens were in dark mode; this is due to what the early cathode-ray tube, which is what powered those old, boxy-style televisions, could do. As graphical interface was adopted and the display technology advanced, people who were not programmers were also introduced to computers. Then, as a skeuomorphic approach, having black text on a white background, just like regular paper, was adopted, (The entry about skeuomorphic design: The power of familiarity in Design: skeuomorphic triggers and personified machines). The approach gained attractions as word processing became the significant tool for every corporation.

Apple’s Lisa, from 1983, was Apple’s first product that incorporated graphical user interface, however, it failed commercially. The Apple Macintosh was the first graphical user interface product that mass-consumer used in 1984. (Image source: Mac-History)

Is dark mode better for your eyes?

Smartphones increased the number of hours people faced screens in general, but also in dark bedrooms. With the impact of glaring white screens in dark bedrooms, many people associate dark mode with being better for our eyes. Although sudden introduction of glares could cause eye strains in the short-term when reading, the long-term health effects resulting from regular use of either dark or light screens are not conclusive; it hasn’t been very long since people have started spending quite a bit of on screens everyday, and we don’t have a large enough sample size to determine this. However, there are many studies that support the notion that reading on lighter screens give one a better long-time reading experience.

In the study by Richard H. Hall and Patrick Hanna, The Effect Of Web Page Text-background Color Combinations On Retention And Perceived Readability, Aesthetics And Behavioral Intention, subjects responded that they could engage better with dark on light text than its counterpart, for example.

When the background is light and more light is lit, one’s pupils contract. Smaller pupils create a wide depth-of-field. On the other hand, less light causes one’s pupils to widen, which makes the focal point shallower; this means that it’s more effort to focus in dark mode. Also, light text scatters light around and causes a halo effect easily on a dark background; it’s harder for eyes to focus and could tire easily. On the other hand, dark text on a light background allows the text to appear with crisp edges.

Is Dark Mode Actually Better For Your Eyes? — Cheddar Explains | Cheddar on YouTube

Additionally, in previously conducted surveys, a lot of people responded that dark mode could cause them to lose interest in the content their engaging with more quickly than without dark mode. This, in fact, could be useful for preventing them from spending too much time on social media. Although dark mode is far superior for one’s health when bedside browsing, studies show that dark mode may not be helpful for a long term comfortable reading experience.

Dark mode is helpful for mobile devices, especially recent ones.

As I mentioned in the beginning, tech companies are pushing to have dark mode as an option. Thanks to the wide adaptation of OLED screens to smartphones, dark mode drastically helps the battery life of mobile devices. To begin with, OLED screens improve the battery life by 30% compared to LCD screen with the same screen spec.This is because OLED can illuminate each pixel only if it is needed. On the other hand, LCD renders content by blocking the light with liquid crystal, hence the backlight has to always be on.

Google presented how the battery use of Google Map navigation in its night mode drops by 63% on Pixel devices with AMOLED (active matrix OLED, a type of OLED that supports various display sizes)compared to the normal mode. In contrast, the iPhone 7 that carried LCD did not show any difference between LCD and AMOLED.

The effect of dark mode on battery life, between OLED and LCD screens (Image source: SLASH GEAR)
The effect of different colors on power consumption (Image source: SLASH GEAR)

The chart below shows how the white screen, when fully lit, consumes so much more power than the black screen. The graph also shows how blue light consumes a lot more power compared to red or green.

The chart shows the drastic difference in power consumption between white and black screens (Image source: SLASH GEAR)

UX archives: Dark mode use cases

Below, I’m archiving how dark mode was implemented in different applications and use cases. I will continue adding more use cases to the list as I encounter different applications with dark mode.

Pocket and reading experiences

Pocket introduced the dark theme back in 2012. The theme helps with the late night reading experience, and it especially makes sense for Pocket, with its core proposition to save curious online content for later, or the user’s best time to read.

Pocket app 4.1 introduced the dark theme back in 2012. (Source: Pocket 4.1 Adds Dark Theme, Pagination, Refinements | MacStories)
Pocket had expanded the dark theme to its website in 2015. (Source: Pocket launches an all-new design for the Web | TNW)

Twitter and Social Media

Twitter was one of the early dark-mode adopters amongst social media. The initial Night Mode was introduced in 2016.

With customer complaints on non-black background, Twitter added the pitch black background, Light Out dark mode, in contrast to Dim dark mode, which was renamed from the original Night Mode. The complaints were for saving device battery life. Light Out was introduced for their iOS apps on OLED devices in March 2019. (Source: Every Gadget and App Should Have a Dark Mode | The Wall Street Journal)
With the customer complaints on non-black background, in order to save the battery life, Twitter added the pitch black background, a “light out” dark mode, to its iOS app in March 2019. (Source: Twitter Goes Dark. Or At Least The App Interface Does | WIRED)

Mac OS Mojave

Apple announced their first full-functioning dark mode to Mac OS at WWDC 2018. The dark mode on their operating system was wished by their users for long time. Some users have said that it helps them focus on content, and that it reduces screen glares that had previously caused eyestrain.

There is an option to set dark mode for each app as well as a global setting. A lot of users have created an automator, which allows them to switch between dark and light mode quickly from Spotlight. (Image source: TekRevue)

Dark Theme on Android OS since Pie

Android’s discover feed can be set to dark theme manually or reflect one’s wallpaper of choice (Source: Here’s every Google app with a dark mode, and how to enable it | 9to5Google)
In May 2019, Google calendar and Keep also announced their dark mode in Android, ahead of the official launch of Android Q. (Source: Google Calendar dark mode rolling out on Android, now official for Keep | 9to5Google)

SaaS program, Data visualization, and Program editors

Many professional tools incorporate dark mode to minimize eye strain. Although a lengthy text reading experience in dark mode may not be the best for concentration, some data visualization tools utilize dark screen nonetheless. Colors also pop in a darker background better, and it is easy to construct a visual hierarchy to highlight an element that needs some extra attention.

Bloomberg Anywhere on iOS Apps (Image source: Jeremy Fuerst via. Dark UIs. The Good and the Bad. Dos and Don’ts from Toptal)
Robinhood app becomes dark themed as the market closes. It is helpful to keep it dark at night, but the change is extremely functional. (Image source: Robinhood via. Design of Robinhood, bringing stock trading to youth)

Programmers who spend long hours in front of screens are also widely known to favor dark mode to help their eyes. It also helps reading different programming language types with clearer colors on a dark background. It also helps identifying programming language taxonomy well, through by nicely well prepared color themes by different programming editing programs.

“A black background reduces eye strain and makes automatic color coding easier to read, which makes code much faster to understand at a glance,” — Toptal developer Kevin Bloch (Image source: Dark UIs. The Good and the Bad. Dos and Don’ts from Toptal)

YouTube

YouTube app follows the grayscale of Android’s dark theme (Source: Here’s every Google app with a dark mode, and how to enable it | 9to5Google)
YouTube website uses darker #111111 background unlike its app (Source: How to Enable YouTube Dark Mode/Night Mode | Nathan Hamilton)

Follow on Medium: https://uxdesign.cc/white-on-black-or-black-on-white-the-pros-and-cons-of-dark-mode-3439e37d6c6c

Reference

Android Q’s dark mode is darker than the Battle of Winterfell | The Verge

The Impact of Web Page Text-Background Color Combinations on Readability,

Retention, Aesthetics, and Behavioral Intention

Dark mode has taken over: the latest on this battery-saving feature | The Verge

Back in black: how to turn on dark mode and save your battery | mobilesyrup

Here’s every Google app with a dark mode, and how to enable it | 9to5Google

Google confirms dark mode is a huge help for battery life on Android | The Verge

Every Gadget and App Should Have a Dark Mode | The Wall Street Journal

Twitter Goes Dark. Or At Least The App Interface Does | WIRED

Twitter will get an even darker ‘dark mode’ | TechCrunch

Dark UIs. The Good and the Bad. Dos and Don’ts | Miklos Philips at Toptal

macOS Mojave review: Dark is cool. The future is hot | iMore

Is Dark Mode Actually Better For Your Eyes? | Cheddar Explains via. Youtube

Google Calendar dark mode rolling out on Android, now official for Keep | 9TO5GOOGLE

Leave a comment

Your email address will not be published. Required fields are marked *