Designing for Dark Mode

Dark mode has become a standard expectation for modern applications. Here’s how to implement it well.

Respect User Preference

Users have strong preferences when it comes to light and dark themes. Always respect the system preference as the default, and allow manual override that persists across sessions.

@media (prefers-color-scheme: dark) {
  /* Default dark styles */
}

Not Just Inverted Colors

A true dark mode isn’t simply inverting your light theme. Consider:

• Background - Pure black (#000) can be harsh. Consider dark gray (#1a1a1a or similar)
• Text - Slightly reduced contrast can reduce eye strain
• Accents - Bright colors may need to be toned down for dark backgrounds

Accessibility

Ensure sufficient contrast in both modes. WCAG recommends at least 4.5:1 for normal text. Test your color combinations with contrast checkers.

Implementation

CSS custom properties work excellently for theming. Define your palette as variables and swap them based on the active theme. Tailwind’s dark: variant makes this straightforward when using utility classes.