Lesson 22 — Dark Mode Cheat Sheet

UI/UX

In one line: Dark mode needs dedicated surfaces, lighter elevation, desaturated accents — not just inverted colors.

Core Concepts

1Elevation via lightness. Higher surfaces get lighter, not shadowed.

2Glow over shadow. Shadows barely read on dark backgrounds.

3Desaturate accents. Full saturation vibrates against dark backgrounds.

4Contrast still applies. WCAG ratios apply in dark mode too.

Simply inverting light-mode palette

Instead: design dedicated dark surfaces/text

Pure black (#000) backgrounds

Can smear on OLED screens during motion