Dark mode
Dark mode is a color theme that uses dark backgrounds with lighter text and UI elements, reducing brightness, improving contrast in low-light environments.
Philosophy
Dark mode is not just an inversion of colors — it’s a thoughtful adaptation of the entire system.
It reduces eye strain in dim environments.
It conserves device battery life (on OLED screens).
It maintains brand personality while adapting to user preference.
Anatomy
Usage tips
Dos
Optimize brand colors for dark backgrounds (adjust saturation/brightness).
Use elevation and shadow sparingly — contrast replaces depth.
Don’ts
Don’t simply invert colors — redesign for dark context.
Don’t use pure white text on pure black for long-form reading (causes glare).
Don’t rely solely on shadows — add contrast layers for hierarchy.
Real-world example
