Designing Dark Mode UI That Looks Premium

It's Not Just Black and White

A common mistake when designing a dark mode interface is simply inverting colors or using pure black (#000000) and pure white (#FFFFFF).

Creating Depth Without Shadows

In light mode, we use drop shadows to indicate elevation. In dark mode, shadows melt into the background. Instead, we use lightness to indicate depth.

• Background: Very dark gray (e.g., #121212)
• Elevated Cards: Slightly lighter gray (e.g., #1E1E1E)
• Popups/Modals: Even lighter (e.g., #2C2C2C)

Text Contrast

Pure white text on a pure black background causes eye strain (halation).

Instead of #FFFFFF, use slightly muted text colors:

:root {
  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.60);
  --text-disabled: rgba(255, 255, 255, 0.38);
}

By carefully managing contrast and utilizing subtle gradients, you can craft a dark mode that feels premium, modern, and easy on the eyes.