DEV Community

Proof Matcher
Proof Matcher

Posted on • Originally published at proofmatcher.com

Dark Mode Website Template: Ultimate Guide 2026

#darkmode #webdev #css #design

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;
}
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode 
const saved = localStorage.getItem('theme');
document.documentElement.dataset.theme = saved || 'dark';
Enter fullscreen mode Exit fullscreen mode

Typography for Dark Backgrounds 

body {
  color: #f0f0f0; /* Warm white, not pure white */
  -webkit-font-smoothing: antialiased;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)