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…