Designing for Dark Mode: A Developer's Guide

Dark mode has become a standard requirement for modern web applications. However, implementing it correctly requires more than just setting background: #000. It requires a deep understanding of optical physics and user perception.

Avoid Pure Black

Pure black (#000000) can cause eye strain due to high contrast with text, and it can cause "smearing" on OLED screens when scrolling. Instead, use dark grays (like #121212) or tinted blacks that align with your brand color.

Elevation through Light, Not Shadow

In light mode, we use shadows to show depth. In dark mode, shadows are invisible. Instead, we use "elevation" by lightening the background surface. The "closer" an element is to the user, the lighter its gray should be.

Contrast and Desaturation

Bright, saturated colors vibrate against dark backgrounds, making text hard to read. When adapting your brand palette for dark mode, desaturate your primary colors and lighten them to ensure they meet WCAG accessibility standards.