The Dark sides of Dark Theme

The usage of the Dark theme in User-Interfaces spiked over the past few years. While the Dark theme definitely enhances the contrast in the application, there are few pitfalls that designers and developers tend to fall in.

Here is why Dark theme usage spiked:

1. Studies suggest Dark theme reduces eye strain in low light conditions for a shorter period of time.
2. The high contrast enhances readability and makes the application look good cosmetically.
3. Dark theme reduces battery usage in devices that have OLED screens.

In OLED screens the pixels responsible for dark regions are turned off whereas in other types of screens pixels just display black color.

Although some studies suggested a reduction in eye strain, few others suggested exposure to Dark themes for a long time is actually bad for the eyes. It was found that total contrast i.e., white foreground on black background makes the eye work even harder to focus.

Now the major mistakes designers and developers tend to overlook.

Some apps and websites made the background dark without changing the foreground. There should be a minimum contrast purely for accessibility reasons. One of the themes of a well-known IDE has this issue on the menus.

One app which I use daily displays the Dark theme by default has no border(or has a dark border which I cannot see) for any of its input fields. How would a user know where to tap and enter details. The similar font for placeholders makes it even more difficult to recognize.

That is why designers and developers need to consider accessibility when considering Dark themes for their applications. Providing an option to switch between Dark and light themes would do even better.

Remember accessibility is not only for specially-abled users, it is for all. There are situational disability instances where a user is standing under the sun and using a mobile or using a mobile whilst in a transport medium.

Chrome developer tool has a good feature to recommend a contrast for each web element. Refer to this link to know more.

There is a Udacity course that explains accessibility beautifully. Although the course is on Web accessibility, the ideologies behind it can be used for mobile apps too.

Accessibility and responsiveness are two sides of the same coin.

Here is a special bit for Front-end Web developers to debug CSS issues using the Dark theme concept.

** {
    background: #000 !important;
    color: #0f0 !important;  
    outline: solid #f00 1px !important;
}

Explanation: Adding this global selector will override all the styles, makes the background dark and outline yellowish. By inspecting the outline regions, you can debug most of the CSS spacing issues.

The Dark theme is neither a hero that G̷o̷t̷h̷a̷m web deserves nor the one it needs it right now.

If you are a designer or a developer or even a user of Dark theme-based apps/sites, let me know what you think!