Dark Mode
A colour scheme using dark backgrounds and light text, reducing eye strain in low-light environments.
Plain English
Dark mode inverts the default light-on-dark contrast — instead of black text on white, you use light text on dark backgrounds. Done well, it reduces eye fatigue in dim environments and conserves battery on OLED screens. The biggest mistake is using pure black (#000000) backgrounds — it creates too much contrast with white text and causes halation (glowing effect). Use deep navy or dark grey instead.
Technical
Implement with CSS custom properties and the @media (prefers-color-scheme: dark) query, or a data-theme="dark" class toggled in JavaScript. Swap surface/background tokens, not individual hex values — if you define colours with tokens, dark mode is a token swap. Key rules: dark backgrounds should be 5–15% lightness (HSL), not pure black; light text should be 85–95% lightness, not pure white; shadows use lower opacity and may use coloured glows instead of black.
Live Demo
Light mode
Background #F9FAFB, surface #FFFFFF, shadow
Dark mode
Background #0A0E1A, surface #111827, glow accent
Dark mode: deep navy (not pure black), elevated surfaces, accent-coloured glow shadows.
Usage
✓ Good usage
Use #0F172A as the dark mode background with #1E293B cards and #F1F5F9 body text — the stepped darkness creates depth without harsh contrast.
✗ Bad usage
Pure black (#000) background with pure white (#FFF) text — the extreme contrast creates eye fatigue and a "halation" glow effect around text.
Recommended values
- Background: #0F172A or similar deep slate (not #000000)
- Surface/card: 4–6% lighter than background (#1E293B)
- Border: 10–15% lighter than background, low opacity
- Body text: #F1F5F9 or similar (not pure white)
- Muted text: #94A3B8 or similar
- Shadows: use accent-coloured glow at low opacity instead of black shadows
Common mistakes
- Pure black backgrounds with pure white text — too much contrast, causes halation.
- Keeping the same box-shadows in dark mode — dark-on-dark shadows are invisible; switch to coloured glows.
- Inverting images — photos should not be colour-inverted; use normal images in dark mode.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Dark mode palette: background #0F172A, surface #1E293B, border rgb(255 255 255 / 0.08), text #F1F5F9, muted #94A3B8. Replace drop shadows with accent-coloured glow effects. Never use pure black or pure white.