CricPlay: https://play.google.com/store/apps/details?id=com.cricplay&hl=en_IN

Designing a Dark Mode for Your App: Balancing Style and Functionality

Apple’s iOS 13 update had everyone buzzing about its new features, including the highly-anticipated Dark Mode. But while this sleek and stylish design option has plenty of benefits, it’s important to remember that not all dark modes are created equal.

Courtesy: Apple.com

We all know what a dark mode is, right? But we may not know that such dark mode can be unhealthy.

Isn’t Dark Mode supposed be better for my eyes?

If you’ve ever tried reading white text on a black background, you may have noticed a slight strain on your eyes. This is because the iris opens wider to receive more light, causing a fuzzy effect known as “Halation”. Using a dark mode that’s too high-contrast can exacerbate this issue and cause eye strain after just a few minutes of use.

A: Unhealthy dark mode, B: Healthy dark mode

Now, increase your phone or computer’s brightness and read the text written on the image A👆🏽. You might feel a little strain on your eyes, and you would want to look away from it.
Now, focus on the image B. It is much easier on your eyes.

Dark modes aren’t just a composition white on black, they are more than that. Dark modes are supposed to be consumed at night when the surrounding lights are switched off to reduce strain on eyes. But a pitch dark background with bright white text on it can make it extremely hard to consume.

Now, you must be wondering, isn’t a dark mode supposed to help the battery last longer? Yes, to some extent it can help but only on devices that house organic displays (OLED). Smartphones with LCD panels won’t benefit from it much.

In OLED display technology each pixel provides its own illumination, which means to show blacks the pixel doesn’t have to light up at all. Now because most OLED panels are limited to a 60Hz refresh rate, scrolling a paragraph on a black UI makes some pixels light up, and due to the low refresh rate it creates a jiggly effect which blurs the vision for fractions of a second. Continued use can of such interfaces can cause fatigue.

While it might save your battery but it will definitely hurt your vision.

So, how can you design a dark mode that’s both stylish and healthy for your users?

The key is to choose darker shades of grey for the background and lighter shades for the text, rather than using pitch black and bright white. This will provide a more comfortable viewing experience and reduce the risk of eye strain.

• Never use a combination of Pitch black (#000000) for BG and bright white (#ffffff) for text. Better go for darker shades of grey for BG and lighter shades of grey for text.
• If your app requires you to maintain that pitch black theme and you can’t go for dark greys then changing the white text to light grey would help.

Examples of unhealthy dark mode

All these apps are hard to see for longer periods and cause strain.

seiOS 13’s messaging app, Twitter’s dark mode (lights out mode), iOS 13’s Dialler app, iOS 13’s Calendar app

Examples of healthy dark mode

All these apps are easier on the eyes.

Slack, Twitter’s dark mode (dim mode), Spotify, CricPlay

So, when designing a dark mode for your app, it’s important to strike a balance between style and functionality. By choosing the right shades of grey and keeping the limitations of your device in mind, you can create a dark mode that’s both easy on the eyes and functional for your users.

I hope you enjoyed this article; all feedback is welcome.

And don’t forget to design a switch to disable that dark mode, some still prefer the old light mode. 😉

Until next time, Peace.✌🏼

https://dribbble.com/shots/3942904-Concept-Interactions/attachments/1046699