Dark mode is all the rage right now; even Google and Apple implemented it right into their devices. Surprising as this is, this feature is nothing new. It used to be the standard from the 60s to the early 80s, back when computers worked with electron beams. The dark mode reign fell with the arrival of CRT monitors that emitted brighter lights. So, why go back in time?

Battery saving

The answer might also be related to technological advancement. With the current evolution to OLED and AMOLED displays, cellphones can avoid the standard backlight that LCD provides. That, combined with dark mode, enables incredible battery savings, a precious resource in these times. But when talking about this subject, there is another concern.

Eyestrain

Many jump straight to use dark mode, assuming that it is better for their eyes, but there might be some controversy. Dark mode seems to give a better performance to people with cataracts and related disorders. But light mode favors visual performance in people with normal or corrected-to-normal vision. Nevertheless, there is evidence of myopia associated with long-term exposure to bright screens, a Nature journal study found.

 

We can also find that black text on a white background works best as it is better suited for the human eye. White text on a black background provokes more effort on the eye and opens it wider to absorb more light. However, using dark mode can reduce eye strain in low-light situations. The discussion continues as many developers and programmers proclaim that dark mode is their preferred way.

Developing for Dark Mode

Adding a simple feature as dark mode should be easy, but in software development, a straightforward feature may not have a straightforward implementation. When developing, you can expect a few issues down the road:

 

Flickering: as your page loads first in light mode, then dark

 

User preference: should be stored for future visits

 

User's default: your site should load according to their default scheme

 

Toggle implementation: a button should be at hand to change themes

 

Toggle state: it should never show the wrong state

 

These problems are tackled in a detailed manner by Josh Comeau in his tutorial: The Quest for the Perfect Dark Mode. It is a great read and contains a thorough explanation for any React developer out there. It also displays a touch of Gatsby, one of our preferred choices.

Designing for Dark Mode

When developing, you should consider that users spend most of their time on other sites. Users expect your site to work like the other ones they know. This concept is called Jakob’s Law. As Dark mode enters their mental space, they might be expecting that toggle to switch from light to dark. Not finding it might feel like a constraint and create disruptive noise in their mental model. Even if you think so, Dark might not be just a mode.

 

As I said, dark mode might be beneficial for dimly lit spaces where bright light might be blunt on your eyes. This feature can reduce the brightness of your display, being usable in any lighting condition. Also, it doesn't hinder night-vision acclimatization. In this mode, a page can be five to six times less bright than in light mode. Consider that these claims might be contested.

 

Another thing to consider is contrast, especially in these cases. You may think that exaggerating contrast might be too harsh on the user, but proper UX insists on keeping contrast as high as possible. Otherwise, you might be hindering your site's visibility, readability, and universal design.

Aesthetics and personal taste

As a designer, you could always want the feature for purely aesthetic preferences, and nobody could argue with you. Having both alternatives gives more creative possibilities, providing fresher looks and space to try some differences. The argument could finally be reduced to that: empowering the user and facilitating a choice. Giving the user the decision is a way for your product to feel tailor-made. Never forget that you should always be focusing on your user.

 

Are you planning to add this feature? At Awkbit, we can help you implement it the way you like it. Get in touch!