WelcomE to the dark side

One does not talk about dark mode without a Star Wars reference. But that being done, dark mode is not only an aesthetics challenge, it involves accessibility, safety, and a very strong scalable foundation.

Dark mode hero
 

A color system at scale

Building a plane in mid-flight is not easy. As teams where moving fast and forward with their products, we needed to keep the plane steady. The system I created needed to be agnostic and robust, but also flexible enough to accommodate the new designs we haven’t seen while we lived in ambiguity for a while. One technique I found to be useful during this time, was to test the new system with other native and third party apps. This helped keep the ball rolling and prepare for the unexpected.

dark-comparison.png
dark-comparison-1.png
 
dark-comparison-2.png
dark-comparison-3.png

Testing dark mode

Testing in the dark

There is no other way. Period.

It is important to understand that there are two ways dark mode can be used. First, as a personal preference from the user. This can be used in plain day light, and it might be a simple aesthetics choice. Second, at night when there is little environmental light around. In this case, we need to be more conscious about the contrast of blacks and whites. A complete dark background or full white text will make the page very difficult and uncomfortable to read and use.