Dark Mode Palettes

The foundation of every excellent dark mode palette is a surface elevation system. Rather than using a single dark background color, the best dark interfaces use three or four levels of progressively lighter near-blacks to communicate spatial hierarchy without drop shadows. The page background sits at the darkest value; cards and content surfaces are one step lighter; modals and elevated panels are lighter still.

Avoid pure black (#000000) as your base. Pure black creates extreme contrast that contributes to eye fatigue, particularly at high screen brightness. Near-blacks in the #0F172A to #18181B range (a cool slate dark or neutral dark) are more comfortable for extended viewing and look more considered than default-black.

Text colors in dark mode should be near-white rather than pure white. #F1F5F9 or #E2E8F0 achieves sufficient contrast against dark backgrounds without the visual vibration of 21:1 pure black/white contrast. Use a three-level text hierarchy: primary (near-white), secondary (mid-grey), and muted (dark grey) to layer information without requiring every text element to compete for attention.

Dark mode backgrounds fall into two temperature categories: cool-shifted (slate blue-blacks) and warm-shifted (charcoal brown-blacks). Cool darks like #0F172A (Tailwind slate-900) or #0A0A12 (deep blue-black) feel technological, focused, and professional, the dominant aesthetic for developer tools, code editors, and technical SaaS products. Warm darks like #1C1917 (Tailwind stone-900) or #141210 feel cosy, editorial, and artisanal, better suited for creative tools, design applications, and premium consumer products.

For most professional software, cool-shifted darks are the safer choice. They photograph well in screen recordings, look professional across different monitor calibrations, and align with user expectations built by years of popular dark-mode tools like VS Code, Linear, and Vercel.

Accent colors in dark mode need to be 10–20% lighter and more saturated than their light-mode equivalents to achieve equivalent visual weight. A blue-600 (#2563EB) that works perfectly on white appears muddy and under-powered against a dark slate background. Blue-400 (#60A5FA) achieves the same perceived intensity on dark backgrounds.

Semantic colors (success green, warning amber, error red) follow the same rule. Use Tailwind's 400-level values for dark mode and 600-level values for light mode to maintain consistent visual weight across both themes.

Border and divider colors in dark mode work best as very low-opacity whites rather than fixed greys. Using rgba(255,255,255,0.08) as your border value adapts automatically to varying surface colors, while a fixed grey can look too invisible on darker surfaces or too prominent on lighter ones.