Designing for Dark Mode: It's Not Just Black

Implementing Dark Mode is expected in 2024. But simply inverting your white background to black is lazy and leads to poor UX.

1. Avoid Pure Black (#000000)

Pure black causes “smearing” (black smear) on OLED screens when scrolling. It also creates extreme high contrast with white text, which can cause eye strain (halation effects).

• Better Canvas: Dark Grey (#121212 or darker slate #0F172A).
• Why: It feels softer, allows for shadows to be visible, and looks more premium.

2. Elevation = Lightness

In Light Mode, we use shadows to show depth. In Dark Mode, shadows are barely visible. We use Surface Lightness instead.

The “closer” an element is to the user (e.g., a modal or dropdown), the lighter the gray should be.

• Background: #121212
• Card (Layer 1): #1E1E1E (5% lighter)
• Modal (Layer 2): #2C2C2C (10% lighter)

3. Desaturate Colors

Bright, saturated colors from your light theme will vibrate against dark backgrounds, making text hard to read.

• Light Mode Blue: #2563EB (Tailwind Blue-600) - Passable on white.
• Dark Mode Blue: #60A5FA (Tailwind Blue-400) - Better visibility on dark.

Rule: Always shift your accent colors 1-2 shades lighter (lower saturation, higher brightness) for dark mode.

4. Text Opacity > Grey Colors

Instead of picking arbitrary grey hex codes for text, use White with opacity. This ensures the text picks up a tiny bit of the background tint, feeling more harmonious.

• High Emphasis: White @ 87% Opacity.
• Medium Emphasis: White @ 60% Opacity.
• Disabled: White @ 38% Opacity.

Testing

Always test your dark mode in a pitch-black room. If your phone feels like a flashlight when you open your app, your dark background is too bright, or your text contrast is too harsh. Aim for “cozy”, not “neon”.