Designing a Dark, Techy Website Theme

Dark themes done right

Most dark themes fail because they're just "white theme but black." A good dark theme needs intention.

The palette

Here's what I used for this site:

• Background: #0a0a0a — near-black, not pure black
• Card surface: #111111 — subtle elevation
• Text: #ededed — off-white, easier on the eyes than #ffffff
• Accent: #00ff88 — terminal green, high contrast
• Muted: #888888 — for secondary info

Typography matters

Monospace fonts for headings and code give the "developer terminal" feel. But body text stays sans-serif for readability. The combination is key.

h1, h2, h3 {
  font-family: 'Geist Mono', monospace;
}

body {
  font-family: 'Geist', sans-serif;
}

Subtle details

• Green accent on hover states and links
• Selection highlight in translucent green
• Thin borders (#222) instead of shadows
• Code blocks with the same dark card background

Small touches compound into a cohesive feel.