It's Not Just Black and White
When designing a dark mode interface, the most common mistake is simply inverting colors or using pure black (#000000) backgrounds with pure white (#FFFFFF) text. This creates a visually jarring experience that causes severe eye strain.
Use Dark Grays
Instead of pure black, use dark grays (like #121212, #0A0118) for surface colors. Dark grays are easier on the eyes, reduce eye strain, and allow you to express elevation and depth more easily because you can use lighter grays or subtle colored glows (glassmorphism) for shadows and highlights.
Desaturate Colors
Bright, saturated colors that look great in light mode can visually vibrate against dark backgrounds. In dark mode, you must desaturate primary colors to make them legible and less aggressive. We often use pastel or neon-adjacent variants of brand colors to maintain brand identity without sacrificing accessibility.
Depth Through Shadows and Light
In light mode, we use drop shadows to indicate elevation. In dark mode, shadows are less visible. Instead, we use lighter surface colors or subtle border highlights (like a 1px border of white at 10% opacity) to show that an element is floating above the background.