With the forthcoming launch of the Marcus app in 2020, I set out to design a dark theme design system to support new, system-level theming in iOS. The purpose of dark mode is not just visual styling; it's to improve visual ergonomics by reducing eye strain, adjusting brightness to current lighting conditions, facilitating screen use in dark environments, and conserving battery life. I took inspiration from Google's dark theme material guidelines and built a system that I then road-showed to the cross-functional teams to explain the importance of supporting dark theme in iOS. This got the cross-functional teams excited and also helped non-designers understand that we do more than just make things look pretty. We were able to prioritize this on the dev roadmap soon after.
In dark theme, elevation and hierarchy is communicated through the use of a non-true black surface and overlaying true white with varying layers of opacity, which creates measured grays. The lighter a surface, the more it implies it is closer to the sun and higher up in elevation.
Primary and secondary dark theme colors should be derived from tonal variants of the primary (light theme) design system. This makes the dark theme system feel connected and part of the family with the primary light theme. Color should be applied sparingly and only as accents, so the majority of the UI is dark. Color choices should be light and desaturated. Saturated colors on dark backgrounds create eye strain and accessibility issues.
The dark theme error/warning color is achieved by mixing the primary error color with a 40% white overlay
The result is a cohesive desaturated palette that connects to the primary design system.
Typography is true white with varying levels of opacity for emphasis, never to go above 87%. UI elements can leverage the color palette sparingly.
