Founder of Pictey
How to Prepare Images for Dark Mode Websites
Over 80% of users now prefer dark mode. But images designed for light backgrounds often look jarring on dark themes. This guide shows you how to create images that work beautifully in both modes.
Convert Images for Dark Mode
Create PNG images with transparent backgrounds that adapt to any theme.
Convert SVG to PNGWhy Dark Mode Matters for Images
Dark mode has become the default for many users. Studies show that 82.7% of people use dark mode on their devices. When images aren't optimized for dark backgrounds, they can:
- Create harsh contrast that strains eyes
- Show unwanted white borders around logos
- Look washed out or lose detail
- Break the visual flow of your design
Logos and Icons
Logos are often the biggest challenge for dark mode. Here are strategies for making your logo work on any background:
Use Transparent Backgrounds
Export logos as PNG with transparent backgrounds. The logo adapts to any background color automatically.
Logos with baked-in white backgrounds create visible boxes on dark themes, breaking the design.
Create Two Logo Versions
For complex logos, consider creating two versions:
| Version | Colors | Use When |
|---|---|---|
| Light Mode Logo | Dark text/graphics | Background is light (#FFF - #E0E0E0) |
| Dark Mode Logo | Light text/graphics | Background is dark (#000 - #333) |
CSS Implementation
Use CSS to swap images based on color scheme:@media (prefers-color-scheme: dark) { ... }
Avoiding the "Halation" Effect
Pure white (#FFFFFF) text or graphics on pure black (#000000) backgrounds creates a "halation" effect - a glowing or blooming appearance that causes eye strain, especially for users with astigmatism.
- Pure white (#FFFFFF) on black
- High contrast causes eye strain
- Text appears to "glow"
- Off-white (#E0E0E0) on dark gray (#1A1A1A)
- Softer contrast reduces strain
- Still highly readable
Color Considerations
Desaturate Colors for Dark Mode
Colors that look vibrant on white backgrounds can appear too intense on dark backgrounds. Consider desaturating colors slightly for dark mode variants.
Maintain WCAG Contrast Ratios
Both light and dark mode images must meet accessibility standards:
- Normal text: Minimum 4.5:1 contrast ratio
- Large text: Minimum 3:1 contrast ratio
- Graphics/icons: Minimum 3:1 contrast ratio
SVG vs Raster Images
- Colors can be changed via CSS
- Scales without quality loss
- Single file works for both modes
- Use CSS currentColor for automatic switching
- May need two versions
- Use transparent PNG when possible
- Better for photos and complex graphics
- Consider using CSS filters
Convert your SVG logos to PNG with our SVG to PNG converter when you need raster versions for specific platforms.
Photos in Dark Mode
Photographs present unique challenges in dark mode:
Don't Auto-Invert Photos
Unlike icons and logos, photographs should never be inverted or heavily filtered. Product photos and portraits need to maintain their original colors.
Use Proper Framing
Photo Placement Tips
- Add subtle borders or shadows to separate photos from dark backgrounds
- Use rounded corners to soften the transition
- Consider a slight drop shadow for depth
- Avoid photos with very dark edges that blend into dark backgrounds
Email Signature Images in Dark Mode
Email clients handle dark mode differently, and your signature images need to work across all of them:
- Always use transparent PNG for logos in email signatures
- Avoid pure white logos that disappear on white backgrounds
- Test in multiple clients - Gmail, Outlook, and Apple Mail all handle dark mode differently
See our email signature image guide for more tips.
Testing Dark Mode Images
Always test your images in both modes before publishing:
- Browser DevTools: Use the color scheme emulation in Chrome/Firefox DevTools
- OS Settings: Toggle your operating system between light and dark mode
- Multiple devices: Test on phones, tablets, and desktop
- Accessibility tools: Use contrast checkers to verify readability
Quick Checklist
Dark Mode Image Checklist
- Logos have transparent backgrounds (PNG)
- No pure white (#FFF) on pure black (#000)
- Icons are provided as SVG when possible
- Contrast ratios meet WCAG standards
- Photos have proper borders/shadows
- Tested in both light and dark mode
Conclusion
Dark mode is here to stay, and your images need to work seamlessly in both color schemes. Start with transparent PNGs for logos, use SVGs when possible for automatic color adaptation, and always test on dark backgrounds before publishing.
For more design tips, check out our PNG vs JPG comparison and best image formats for websites.
Create Dark Mode-Ready Images
Convert and optimize your images for perfect display on any background.