Why Support Dark Mode

It saves battery on OLED screens and reduces eye strain. It's a system-wide expectation now, not a niche feature.

Not Just Black

Avoid pure black (#000000). Use dark greys (#121212) to reduce smearing on OLEDs and allow for shadow visibility.

Color Desaturation

Bright colors vibrate on dark backgrounds. Desaturate your primary colors or use lighter pastel variants (200-500 tones) for dark mode.

Elevation and Depth

Shadows don't show well on dark surfaces. Use lighter surface overlays to indicate elevation. The higher the surface, the lighter the grey.

Text Contrast

Ensure WCAG AA compliance. White text should usually be slightly dimmed (High Emphasis 87%, Medium 60%) to prevent glare.

Image Adaptation

Allows illustrations to have dark variants. dim photographs slightly to prevent them from being blindingly bright.

Testing

Test in various ambient lighting. Ensure semantic colors (error red, success green) remain visible and distinct.