Dark mode is not just inverting your colors and calling it done. The products that implement dark mode well treat it as a separate, fully considered visual language — not a CSS filter applied to a light-mode design.
The Semantic Color System Requirement
You cannot implement dark mode well without a semantic color system. If your components reference raw color values (background: #ffffff), switching modes requires touching every component. If your components reference semantic tokens (background: var(–color-surface-primary)), switching modes requires changing 10 tokens.
This is the most common dark mode failure mode we see: teams add a dark mode toggle, it looks acceptable on the main screens, and then users discover that 30% of secondary screens still have white backgrounds because those components hardcoded their values.
Contrast Requirements
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text on dark backgrounds. The trap is that dark backgrounds with reduced luminance can look comfortable to design in Figma but fail contrast when measured. Always validate with a contrast checker, not your eyes.
The Details That Matter
Shadows don’t work on dark backgrounds — elevation should be expressed through lighter surface colors instead. Images and illustrations designed for white backgrounds need dark-mode variants. Data visualization color palettes need separate dark-mode versions — the colors optimized for white backgrounds often look washed out or garish on dark ones. Typography weights may need adjustment — a 400-weight font that reads clearly on white may need to be 300 on dark to avoid feeling too heavy.
