Designing for Dark Mode: Lessons from Building Pixly

Dark mode is everywhere now. Every OS, every browser, every app offers it. But good dark mode design is surprisingly hard. It's not just inverting colors — it's rethinking contrast, depth, and hierarchy for a fundamentally different visual context.

Start with a Token System

The foundation of good dark mode is a semantic color token system. Instead of hardcoding hex values, define tokens like --bg-surface, --text-primary, --border-default. Then override those tokens per theme. This is exactly what we did at Pixly.

:root {
  --bg-base: #0A0B0F;
  --bg-surface: #13151D;
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --border-default: #2A2D3A;
}

[data-theme="light"] {
  --bg-base: #F8F9FB;
  --bg-surface: #FFFFFF;
  --text-primary: #1A1B23;
  --text-secondary: #52555E;
  --border-default: #E2E4EA;
}

Depth Through Elevation, Not Shadows

In light mode, shadows create depth. In dark mode, shadows are barely visible against the dark background. Instead, use surface color elevation — each layer of the UI gets a slightly lighter background. Our elevation scale goes from --bg-base to --bg-surface to --bg-elevated.

Contrast Is King

WCAG AA requires 4.5:1 contrast for body text. In dark mode, this means your text needs to be light enough against the dark surface. But avoid pure white on pure black — it causes eye strain. We use #FAFAFA on #0A0B0F, which gives a 17:1 contrast ratio without the harshness of pure white.

• Body text: 4.5:1 minimum contrast (WCAG AA)
• Large text: 3:1 minimum contrast
• Interactive elements: 3:1 minimum against background
• Avoid pure white (#FFF) on pure black (#000) — causes halation
• Desaturate vibrant colors in dark mode to reduce glare

Test Both Modes

Every component should be designed and tested in both light and dark mode from the start. Retrofitting dark mode is painful and produces mediocre results. At Pixly, we toggle between themes constantly during development and audit every new component in both modes.

Color Adjustments for Dark Mode

Colors that look great in light mode often need adjustment for dark mode. A vibrant blue that pops against white becomes glaring against dark backgrounds. The solution is not to abandon your brand colors but to adjust their saturation and lightness for the dark context. We reduce saturation by 15-20% for most accent colors in dark mode and increase lightness slightly to maintain visibility.

Images and screenshots deserve special attention. A screenshot with a white background becomes a blinding rectangle in dark mode. We add a subtle border and rounded corners to all in-content images, and for screenshots that are inherently light, we apply a slight opacity reduction (0.9) to reduce their visual weight against the dark surface.

Accessibility Beyond Contrast

Contrast ratios are the baseline, but dark mode accessibility goes further. Users with astigmatism may experience halation — a spreading of light that makes text appear to blur against dark backgrounds. This is why pure white on pure black is problematic. Using slightly off-white text (#FAFAFA) on slightly off-black backgrounds (#0A0B0F) reduces halation while maintaining high contrast.

Focus indicators also need attention. In light mode, a blue focus ring works well. In dark mode, the same blue may not have sufficient contrast against the dark surface. We use a lighter, more saturated focus color in dark mode and increase the ring thickness from 2px to 3px to ensure visibility for all users.

• Use slightly off-white text instead of pure white to reduce halation
• Increase focus indicator thickness in dark mode for better visibility
• Reduce color saturation by 15-20% to prevent glare
• Add borders to light-colored images and screenshots
• Test with reduced transparency and increased contrast accessibility settings
• Ensure color is never the sole indicator of meaning or state

Animation and Transitions

Dark mode changes how motion is perceived. Subtle shadows that guide the eye in light mode disappear in dark mode. To compensate, we use subtle scale transforms and opacity changes for hover states and transitions. A 1.02 scale on hover provides visual feedback without relying on shadows. Transition durations should be slightly longer in dark mode (200ms vs 150ms) to feel smooth rather than abrupt.

Dark mode is not a theme — it is a different design context. Every color, shadow, and elevation needs to be reconsidered.