Back

#e-commerce

#startups

7 min

Dark Mode in Mobile Apps: Just Another New Black or a Powerful User Engagement Tool

Will it pay off, joining the dark side

Anna Baida

UX Designer

Eva Petritski

Content Manager

February 2, 2023

Intro Pros and cons of a dark mode Dark mode’s effect on app metrics Case study: WhatsApp Case study: eBay and Athletic Case study: Twitter Key takeaways

Nowadays, leading social networks and messengers support dark mode: WhatsApp, Snapchat, Telegram, Discord and others. Streaming services, marketplaces and banks are also adding dark themes to their app interfaces.

Despite its growing popularity, the dark mode is still subject to discussion. Companies are certain that this mode reduces eye strain, saves battery power and helps users stay more focused on their tasks. Scientists disagree—a dark background hampers text perception and makes it more difficult for users to read anything.

In this article, we will shed light on the pros and cons of dark mode to see whether it is worth spending money on.

Dark mode saves battery power on OLED screen devices

Unlike liquid crystal, OLED displays do not backlight the pixels with the color black. For example, if the page has a black background and white captions, the OLED display will only highlight the pixels used in the texts. By doing so, it minimizes battery drain: the battery no longer has to waste energy on the backlight, thus keeping the charge longer.

Let’s take Google. They compared the power consumption of a Pixel AMOLED screen with an iPhone 7 LCD screen. They opened Google Maps in the dark mode on both devices and measured the consumed energy.

The Pixel AMOLED display used almost three times less energy in the dark mode than in the light mode, while the iPhone 7 with the LCD screen consumed 230 mA in both modes. Thus, the enabled dark mode allowed to save up to 63% of the charge on OLED displays.

Dark mode helps to concentrate

According to Apple, dark mode helps to focus while working with text. The relevant content is highlighted, while the interface elements are dimmed down so that they don’t stick out too much.

Regular interface colors in the dark mode should be saturated, so that the text and images don’t strain the eye, as recommended by Google in its Material Design guides.

Dark mode reduces eye strain

According to the Google data, dark screens are easier to work with when it comes to low-light environments. For example, most developers prefer writing code on a dark background. When the dark mode is used at night, the light from the monitor is not so intense and the eyes get less tired.

Thomas Steiner, a DevRel engineer at Google, ran a survey to learn how often developers used the dark mode. Most of them reported it was more comfortable for them to work with a dark interface.

Text on a dark background is more difficult to comprehend

A Susanne Mayr experiment revealed that users understand the text better and identify errors faster when they read from a white background. She also researched whether the text background color affected cognitive abilities.

According to the data from German scientists, the text on a dark background is more difficult to read because it is too bright, and puts more pressure on eyes.

Dark mode is especially harmful for users with vision impairments

Researchers from Vancouver proved it is more difficult for people with astigmatism to read white text from a black background. While reading in such mode, the pupil dilates, and the text seems blurrier. The user is then forced to strain their eyes and look at the screen with more effort.

However, despite scientific statements, many users still consider the dark mode more comfortable than the light mode and happily use it on their devices. Developers, in their turn, more and more often add the function of switching to a dark interface to their websites, applications, and operating systems.

Dark mode is 1.5 times more expensive to develop

If your app didn’t have the dark mode in the beginning, adding it to a new update might be quite pricey. Depending on the specifics of the design, dark mode can add up to 40% to the overall development cost. Our project manager pointed out that it can increase the budget up to 1.5 times and top 4-6 hours of work on each screen.

Dark mode is complicated. It is hard to get the color scheme right as you need to take into consideration the various shades that would be friendlier for the eye, aesthetically pleasing, and suitable for integrating with your app or website signature design and colors.

How dark mode affects app metrics

There is no clear answer yet. Companies either hide or do not possess the exact number of users who prefer the dark mode to the light one. As of now, there are also no studies explaining the effect of the dark mode on user engagement. Nevertheless, some companies have stated that dark mode increases the metrics of their applications.

Facebook users with dark mode spend one hour longer in the app

Swedish researchers studied how dark mode affected the visual appeal of Facebook posts. They interviewed 157 people aged 17 to 27 years old. 90 of the respondents reported that they have at least once used Facebook in dark mode. 22 people said that it was visually more pleasant and easier on the eye. 56 people had the dark interface on all the time. On average, these people spent one hour longer on Facebook than the users who preferred the light mode.

Terra managed to reduce the bounce rate and increase the number of pages read per session

In December 2021, Brazilian media company Terra noticed that the bounce rate on desktop was higher than in the mobile application.

In their Android app, the bounce rate with light and dark modes was the same—26% each. On desktop, however, the rate was almost twice as high, with 13% among users who chose light mode and 24% among those who preferred dark.

As an experiment, Terra added the dark mode to their website and app. And then compared the engagement rates of users with light, and dark themes on.

On Android, the bounce rate remained the same. The number of pages per session, however, doubled from 2.5 to 5 after introducing dark mode.

On the desktop, both metrics improved with the dark theme on: the bounce rate reduced from 27% to 11%, and the number of pages read per session grew almost threefold—from 3.7 to 10.

Overall, dark mode helped to reduce the bounce rate by 60% and increase the number of pages read per session by 170%. Terra deemed the experiment successful and added the dark mode to their website.

But users not always give dark mode such a warm welcome.

WhatsApp did not get it right at first

The world’s most popular chatting app rolled out their dark mode feature back in March 2020. The theme update was supposed to help reduce eye strain in low light environments and avoid those awkward moments when one WhatsApp notification suddenly lights up the entire room. When designing their dark mode, WhatsApp focused on staying in line with iOS and Android color defaults and keeping the information hierarchy, so that users could easily navigate the app even when it’s all black.

However, the result was a bit of a letdown: users reported that the text on the dark background was harder to read, especially when written in bold. The TNW head of design pointed out the uncomfortable contrast of the name colors on muddy chat bubbles and the overall unfriendliness of the new interface.

Users also reported the salient differences between the iOS and Android color palettes: iPhone users had a slightly better color scheme, while on Android, the colors looked dark green or grayish. Another problem was that WhatsApp did not allow users to switch off the dark mode solely on the app, as it adjusted to the phone’s system defaults, making it impossible to turn the dark mode off without switching the whole device to the light mode.

Such cold reception eventually prompted WhatsApp to reconsider the color schemes for both builds.

Dark mode in app, add-on for website

In July 2020, eBay became one of the first e-commerce platforms to add a dark mode to their Android and iOS apps. The mode was designed to alleviate eye strain and create an accessible shopping experience for all customers.

The company focused on catering to customers with light sensitivities and visual impairments, saving battery life, and, potentially, seeing more late night purchases. Along with the general background and font colors, they changed the logo and the eBay brand red, yellow, blue, and green colors to less saturated shades.

The mode works on the eBay Android and iOS native apps, however, no such option is available for the desktop users. It may baffle many customers, but luckily, there are tons of add-ons that allow viewing any website in the dark mode.

The Athletic website rolled out a night mode for its mobile app back in 2018.

The mode features a sleek pitch black design with subdued text color that makes bedtime reading more enjoyable and less harmful for eyes. Users have been asking for a website dark mode, but it seems that it is not going to happen anytime soon.

After all, there is little point in spending time and money on developing a dark mode specifically for a website, as there already exist numerous add-ons and extensions that allow the same viewing option and are free of charge.

Twitter saves battery with a pitch black Lights Out mode

Twitter was one of the pioneers of the dark mode trend, rolling out its first night mode feature back in 2016.

However, users soon started to notice that the existing dark mode was just not dark enough. The new total-black mode was launched in March 2019.

The app’s new pinch black interface actually allows saving battery on OLED screens, as it only lights up the pixels that aren’t back, unlike the previous version’s dark navy background, which created only an illusion of a real dark mode.

Now, Twitter has multiple dark mode options to choose from: Dim, which was the original 2016 dark mode with bluish undertones, Lights Out, the recent battery-saving black theme, and Device Settings that adapts to user’s defaults. The feature is available for both iOS and Android users, as well as in the desktop version.

Conclusion: does your app need the dark mode

On the one hand, dark mode increases the development cost and takes more time to design and implement correctly. It might be a challenge to roll out a mode that provides a pleasant user experience while also saving the device battery and catering to users with light sensitivities.

On the other hand, dark mode can help increase user engagement rate, as many users already expect major tech platforms to have it.

So it is better to take your time and not cheap out on developing a decent dark mode, so that in the end it performs all the great functionalities it is supposed to. If you are just at the beginning of your path, wait some more until you are sure you have all the resources for the development; if you’ve been in the game for quite a while, consider adding a dark mode because your users will most likely expect it.

last update

February 2, 2023

Subscribe to
our newsletter

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

First Central Tower, 360 Central Avenue, Suite 800 St. Petersburg, Florida 33701

T-Mobile super app design concept

How to Create a Mobile-Centric Omnichannel Experience in Telecom

Telco Growth Online Conference

Our services

Industries

We’re HeyInnovations

Dark Mode in Mobile Apps: Just Another New Black or a Powerful User Engagement Tool