Dark Theme: Random Thoughts

Less Is More

This is a popular phrase in the design community, but sometimes we forget this hymn as we try and flex our design prowess. But with dark theme, it’s a friendly reminder to create an invisible UI that puts content first.

Micro-Everything

Dark theme limits what designers can use like colors, drop shadows and background colors. Most buttons will have a lighter shade of black and not your primary light color. This forces you to create micro interactions that are subtle enough to express a given goal while maintaining a muted environment.

Dark to Light Not Light to Dark

You can flip a designed dark theme to light theme but not the other way around. You can see this in IOS 13 design refresh from apple. We looked at what would occur if we flipped our current app to dark, and it was a complete mess. Dark theme requires a recalibration of how you portray touch points as well as content grouping & hierarchy.

ProTip: Have a base of #000000 or #FFFFFF and work of percentages such as 87% / 60% / 38% of opacity. This gives you a scalable hierarchy of color in things like font. Allowing you to only change the base color when you do the color flip.

Dark Illustrations

I first thought it would be difficult, but it’s actually fun and easy. Illustrate in gray scale, add some noise, and then just color and animate the focus point.

Final thoughts

Every designer should design in both. It really forces you to be intentional with your use of color, groupings, fonts, a “white” space balance.