Dark mode colors that don't hurt your eyes at 11pm

1. Why pure black is the wrong starting point

Pure black (#000000) creates maximum contrast with everything on top of it. That sounds good until you're reading a 2000-word article at midnight.

• High contrast causes halation — text appears to bleed into the background.
• Layered surfaces become invisible — cards look the same as the page.
• Shadows don't work on pure black — you lose depth entirely.

2. Building the dark surface stack

A good dark UI needs at least three distinct surface levels so components have visual separation without relying on borders everywhere.

• Page: #0F172A or #111827 — the darkest level.
• Card/panel: #1E293B or #1F2937 — slightly elevated.
• Popover/modal: #334155 or #374151 — clearly above the card.
• Borders at 10–15% white opacity keep things separated without being harsh.

3. Taming the accent in dark mode

The same blue that looks calm on a white background becomes electric on a dark one. You usually need to dial it back.

• Use a slightly desaturated or lighter tint of your brand color for dark mode.
• Avoid neon greens and hot pinks as primary actions — they cause visual fatigue.
• Test the accent on all three surface levels, not just the page background.

Common mistakes

• Starting with #000000 as the page background.
• Using the same accent hex in both light and dark mode.
• Forgetting to check muted text and disabled states — they disappear first.

Before you ship

• Set page background to #0F172A or #111827, not pure black.
• Use #E2E8F0 or #F1F5F9 for body text, not pure white.
• Create three distinct surface levels.
• Reduce accent saturation by 10–15% for dark mode.