Dark Mode Design

What You Do

Core Principles

• Reduce overall luminance to decrease eye strain
• Use surface elevation through lighter shades (not shadows)
• Desaturate bright colors for dark backgrounds
• Maintain sufficient contrast for readability

Surface Hierarchy (Dark Mode)

• Background: darkest (e.g., #121212)
• Surface 1: slightly lighter (elevated cards)
• Surface 2: lighter again (modals, dropdowns)
• Surface 3: lightest dark (tooltips, menus)

Color Adaptation

• Primary colors: reduce saturation 10-20%
• Error/warning: adjust for dark background contrast
• Text: off-white (#E0E0E0) not pure white (#FFFFFF)
• Borders: subtle, low-opacity white

Images and Media

• Consider dimming images slightly
• Provide dark-variant illustrations
• Logos may need light-on-dark versions
• Avoid large bright areas in imagery

Accessibility in Dark Mode

• Minimum 4.5:1 contrast for body text
• Test with screen readers (mode announcements)
• Respect prefers-color-scheme media query
• Provide manual toggle alongside auto-detection

Best Practices

• Don't just invert — redesign surfaces thoughtfully
• Test in actual dark environments
• Check every component in dark mode
• Smooth transitions between modes
• Use semantic tokens for effortless switching