good dark mode shadows & elevation
~ ~ ~
You know what’s really really hard to get right in dark interfaces? Shadows. Something that you have to be careful and subtle with in light interfaces is barely imperceptable in dark interfaces.
A lot of this is just thanks to the physics of light.
Screens are devices which emit light. When it comes to depicting elevation in digital interfaces, we’re normally relying on surfaces & shadows — ie: colors. Now the principles for surfaces colors following elevation is pretty consistent: darker colors appear lower or farther away, lighter colors appear higher or closer to your eyes.
Examples: dark & light mode elevations using surface color alone
Using surface color alone to depict elevation.
Using surface color alone to depict elevation.
But oftentimes, you’re working with a limited color palette for consistency, and just the elevation jumps alone are not enough to create a cohesive sense of depth.
Examples: dark & light mode elevations using box shadows alone
Using box shadows alone to depict elevation.
Using box shadows alone to depict elevation.
Now we’re getting somewhere interesting… The box shadows alone could be enough to depict elevation on the light themes, but are basically imperceptible in the dark theme. Again, the physics of light spoils our fun: shadows are dark values — a representation of the inverse of light cast on an interface, depicted by a screen which casts light.
The shadows applied to light mode are at the opposite side of the tonal spectrum as the boxes they wrap around, so their presence is glaring and this is why designers often talk about the importance of being subtle with shadows, but what they should mean is to be subtle with shadows in light mode.
Okay, so what if we combine these two techniques?
Depicting elevation with both light and shadow
Using surface colors and box shadows to depict elevation.
Using surface colors and box shadows to depict elevation.
Closer… we’ve definitely got something feeling more consistent about communicating elevation across both themes. But to my eye, the dark themes are only communicating that based on the surface colors, and truthfully the shadows are too subtle to come through at all.
I’m not sure I’ve ever seen this discussed in dark vs. light theme design, but it seems to me that theming needs to extend to all uses of shadows, not just surface/fill colors.
Depicting elevation with custom shadows and surface colors for each theme
Using theme-specific shadows and surface colors to depict elevation.
Using theme-specific shadows and surface colors to depict elevation.
Oh… oh yeah… Those are nice.
Anyways! That’s all for this note. This was a bit of an experiment to try using this website as a playground to explore interface design in the context of an app, rather than just a design file. Hope you enjoyed it, and I hope to explore more pieces like this!
References & Further Reading
~ ~ ~