paint-brush
Dark UI: Advantages and Use Casesby@Lees
1,905 reads
1,905 reads

Dark UI: Advantages and Use Cases

by AdamAugust 12th, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

A dark theme is a low-light UI that displays mostly dark screens. The dark background has three purposes: Limiting image distortion, easing eye strain and saving energy. Dark mode is best optimized in OLED and AMOLED screens. Most of the entertainment apps (Netflix, Spotify, YouTube, Smart TVs) support dark-themed UI. For a better UX, use this mode only in websites and apps where there is minimal text or compressed information. Do not use dark mode in content where there are heavy text and data.
featured image - Dark UI: Advantages and Use Cases
Adam HackerNoon profile picture

The dark UI feature that you have witnessed recently in Android and iOS apps is a good thing; large number of studies have shed some light on the benefits of a dark background.

What is Dark UI?

A dark theme is a low-light UI that displays mostly dark screens. They emit low levels of light while maintaining a high standard of usability. A dark theme turns on or off with the help of an icon toggle.

A dark UI utilizes dark gray as the primary surface color for components. They reduce eye strain, as light text on a dark gray surface has less contrast than light text on a black surface.

Advantage of using Dark UI

The dark UI feature was included in apps initially to reduce eye strain. Dark background also eliminates distracting white spaces on some webpages, thereby enhancing focus.

However, there is a little bit of discomfort in the eyes if you use this at night. This discomfort is one of the reasons why dark mode has a health benefit. The dark mode is less painful than the standard views, even during daylight hours.

Does black background really save energy?

If you use Google Pixel at the highest light setting, it consumes six times the amount of power as in the highest dark setting. Hence, the dark background consumes very less power.

But you should know this, energy conservation depends on the type of screen the smartphone has.

What I mean is, dark mode is best optimized in OLED and AMOLED screens. According to Google, the dark mode does not have much of an impact on LCD screens (like in Samsung Galaxy S9). But in the case of AMOLED screens (like in iPhone XS), the dark mode saved approximately 63% power.

Therefore, tech companies are shifting away from LCD models and focusing on those displays which save energy while on dark mode.

When it comes to computer monitors and laptop screens, you can still activate the dark mode somewhat effectively on LCDs because of the filter it places over the blue light which the backlight on your monitor emits. Late-night browsing should give you less of a headache.

You will experience the full potential of dark UI effectively only on OLED and AMOLED screens.

Does black background change the way you perceive colors?

As a beginner, you should know that the night filters available on iOS and Android just cause an illusion of reducing eye strain. Discoloration and distortion may occur while using night filters.

On the other hand, the dark mode is aware of aesthetics (like sleekness). The dark background has three purposes:

Limiting image distortionEasing eye strainSaving energy

This mode uses more muted colors that are easier on the eyes and require less power to display. Take an instance. Reddit manually lowered its brightness to improve visibility via contrast.

Who uses this mode?

Most of the entertainment apps (Netflix, Spotify, YouTube, Smart TVs) support dark-themed UI. It makes sense, too. You view media from a distance of 6-12 feet. For that viewing angle, this setup is the most appropriate. We use these apps on our television, laptops, and mobiles either in dim light or in the dark. Also, colorful content such as movie posters looks mesmerizing with dark mode.

Spotify uses a dark theme for the user’s comfort.

Hence, the black background is well fitted for entertainment apps.

For a better UX, use this mode only in websites and apps where there is minimal text or compressed information. The emphasis should be on visual stuff, like teasers, ads, vivid posters, etc.

If you’re interested in using text, use a color with high contrast, preferably white or any other strong color (but no grey shade).

Who does not use dark mode?

Source Credit :- Dark UI


Do not use dark mode in content where there are heavy text and data. The consensus in the design community is that black backgrounds are a huge challenge to design for unless you are dealing with simple content and just a sprinkling of text here and there.

One has to maintain sufficient contrast, which impacts the overarching challenge, readability, which is connected to usability, which impacts UX. All colors work on a white background, whereas on a black background the reduction of useful colors occurs.

Conclusion

UI and UX developers design the dark mode, and take every pixel into account and make sure you don’t lose anything by surfing in the dark. Still, white is the default background. Consequently, more and more websites and apps are getting coded for dark mode.

No matter what, dark UI is very useful when it comes to using a smartphone in the night, view media in a dimly lit environment, and saving energy.