In dark mode, height is surface lightness, not shadow
Aliases: dark elevation · surface overlay · drop shadow
What it is
In a light theme, the soft shadow under a card says “this piece is floating”. Move the same shadow into a dark theme and it either disappears or becomes a dirty rim. Height in the dark is surface lightness: the raised layer is lighter than what it sits on, like a table catching the lamp in a dim room — not another, blacker shadow thrown into a hole.
Why it happens
A shadow darkens the surround. A dark surface is already near the display floor, so there is little darker left; the extra black is either below a just-noticeable difference or reads as grime. A light outer glow “instead of a shadow” looks like a focus ring or a selected state, so the height meaning is borrowed away.
Depth in dark surroundings is mostly received light: nearer or upper surfaces are brighter. Writing elevation as a translucent white stacked on the base makes height a change in L*, not in shadow radius. This is separate from “dark mode is not invert” — hues can already be remapped correctly, and layers still glue together if height still depends on shadow.
Studying it
Ask observers to rank which UI pieces sit on top; compare a shadow version with a lightened-surface version. Independent variables: shadow visibility, surface ΔL*, presence of a stroke. Dependent variables: ranking accuracy, whether a glow is mistaken for selection. Retest after dark adaptation; people who just switched from a light theme over-credit shadows.
Where it stops holding
- Shadows still work in light themes; do not ban them there on the back of this claim.
- Lightening is obvious on true black and weak on mid-grey for the same ΔL*. The height system has to follow the window ground, not a frozen overlay white.
- High-contrast mode drops soft shadows and flattens many intermediate lightnesses; height then needs stroke or spacing, not this lightening recipe.
Applying it
- Dark elevation is a neutral white stacked on the surface (or a slightly lighter surface colour). Shadow is at most a weak extra, never the only cue.
- Do not signal height with a coloured glow — it fights focus and error.
- Give modal, menu and card each a surface; do not copy the light theme’s shadow-8.
- How to check: turn the shadow layer off, leave surface colour, and ask whether people can still say what sits on what. If they cannot, height has not moved onto lightness.