80%+ of developers use dark mode as their default in 2026. Here's how to design and build it correctly.
The Color System
Never use pure black #000000. Use near-blacks:
:root {
--bg-base: #050505; /* Deepest background */
--bg-elevated: #0d0d0d; /* Cards and panels */
--bg-floating: #141414; /* Tooltips, dropdowns */
--text-primary: #f5f5f5;
--text-secondary: #a3a3a3;
--accent: #e53e3e;
}
Elevation Through Lightness
In dark mode, elevation = lighter bg (not heavier shadow):
/* Base */ .bg-0 { background: #050505; }
/* Cards */ .bg-1 { background: #0d0d0d; }
/* Modals */ .bg-2 { background: #141414; }
/* Tooltips */ .bg-3 { background: #1a1a1a; }
System Preference + Manual Toggle
@media (prefers-color-scheme: dark) {
:root { --bg-base: #050505; --text-primary: #f5f5f5; }
}
[data-theme="light"] {
--bg-base: #ffffff; --text-primary: #0a0a0a;
}
const saved = localStorage.getItem('theme');
document.documentElement.dataset.theme = saved || 'dark';
Typography for Dark Backgrounds
body {
color: #f0f0f0; /* Warm white, not pure white */
-webkit-font-smoothing: antialiased;
}
Premium Dark Effects
/* Glow accent */
.glow { box-shadow: 0 0 40px rgba(229, 62, 62, 0.15); }
/* Subtle noise texture */
.texture::after {
content: ''; position: absolute; inset: 0;
background: url('/noise.png'); opacity: 0.03;
}
The Best Dark Mode Brands in 2026
-
Linear —
#0f0f0f+ electric violet -
Vercel —
#000000+ high contrast white -
Raycast — warm charcoal
#1c1c1e+ orange
Free dark mode templates: ProofMatcher
Originally published at ProofMatcher Blog