Dark Mode Design — How Images and PDFs Should Adapt

Why Dark Mode Matters

Over 80% of users enable dark mode on at least one device. Images and documents designed for light backgrounds can look jarring in dark interfaces.

Image Considerations

Transparent PNGs

Logos with transparency that assume a white background may become invisible on dark backgrounds. Solution: add a subtle background or use a version with appropriate contrast.

White-Background Photos

Product photos on white backgrounds create bright rectangles in dark mode. Consider:

• Adding a subtle border to define the image edge
• Using rounded corners to soften the contrast
• Providing dark-background alternatives

Screenshots

Screenshots of light-mode interfaces stand out against dark backgrounds. Add a border or shadow to frame them.

PDF Considerations

PDFs typically have white pages. When embedded in a dark interface:

• The white pages create strong contrast
• Consider offering a dark-background PDF alternative
• Use borders or shadows around PDF previews

Best Practices

1. Test images in both modes — What looks great in light mode may fail in dark
2. Use bordered containers — Subtle borders help images blend into any background
3. Provide transparent and opaque versions of logos
4. Use mid-tone backgrounds for product photos instead of pure white
5. Consider contrast ratios — WCAG guidelines apply to both modes