Dark mode support has moved from a nice-to-have to an expected feature. Operating systems, browsers, and apps default to it for millions of users. And images—which were designed for light interfaces—consistently cause problems when dark mode turns on.
White backgrounds become jarringly bright. Transparent PNGs show halos from the light-mode composition process. Light-colored icons disappear. Hero images with delicate light tones lose all detail.
Fixing image behavior in dark mode isn’t just a CSS problem. It requires thinking about image creation, transparency handling, and delivery from the start.
The Core Problem: Images Encoded for Light Backgrounds
Most web images are created and exported with the assumption that they’ll sit on a white or light background. This shows up in three specific ways:
White-background JPEGs on dark interfaces. A product photo with a white background looks fine on a white page. In dark mode, the white rectangle sits on a dark background and looks like a lightbox. The image itself is fine; the context changed.
Transparent PNGs with light-mode halos. When you remove a background from an image and export as PNG, the edge pixels often have partially transparent values blended toward the original background color. On a white background, these near-transparent pixels are invisible. On a dark background, they appear as a light fringe around the subject—the classic halo artifact.
Light-colored elements that disappear. A white logo, light gray icon, or cream-colored illustration component that’s clearly visible on a light background becomes invisible on a dark background. If your SVG or PNG has fill="white" or near-white colors, dark mode users simply can’t see it.
Strategy 1: Use True Transparent Backgrounds
For product images, icons, and illustrations meant to blend with the page background, export with true transparency—PNG-24 or WebP with alpha channel. The image subject should float on the page rather than carrying its own background.
The halo problem: as noted, edges often contain partially transparent pixels mixed toward the original background color. To prevent this:
- Use a professional background removal tool that respects edge transparency
- Export at high quality to preserve edge detail
- Test the output on both white and dark backgrounds before publishing
If you’re removing backgrounds yourself, check edges at 200% zoom on a dark background before exporting. Halos that are invisible on white become very obvious on dark.
Strategy 2: CSS-Based Dark Mode Image Switching
The prefers-color-scheme media query lets you serve different images depending on the user’s theme preference.
<picture>
<source
srcset="/images/logo-dark.png"
media="(prefers-color-scheme: dark)"
/>
<img src="/images/logo-light.png" alt="Company Logo" />
</picture>
This is the most reliable approach for images where you need fundamentally different versions—a dark logo for dark mode, a light logo for light mode. It requires creating and maintaining two sets, but the results are always correct.
For inline CSS backgrounds:
.hero {
background-image: url('/images/hero-light.jpg');
}
@media (prefers-color-scheme: dark) {
.hero {
background-image: url('/images/hero-dark.jpg');
}
}
Strategy 3: CSS Brightness and Filter Adjustments
For images where you don’t want to maintain two sets, CSS filters can compensate:
@media (prefers-color-scheme: dark) {
img {
filter: brightness(0.85) contrast(1.05);
}
}
This reduces brightness so light images don’t glare on dark backgrounds, while slightly boosting contrast to maintain apparent sharpness.
For logos and icons that are dark on light but need to be light on dark:
@media (prefers-color-scheme: dark) {
.logo {
filter: invert(1);
}
}
invert(1) flips a black icon to white instantly. It works perfectly for monochrome graphics. For color images it produces a negative effect, so it’s limited to monochrome assets.
For dark logos on transparent backgrounds, invert(1) hue-rotate(180deg) does a better job preserving the original hue while flipping luminance.
Strategy 4: SVG with currentColor
SVG icons and illustrations can respond to the page’s color scheme automatically when they use currentColor for fills and strokes instead of hardcoded hex values:
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="..." />
</svg>
Set color on the parent element in CSS, and the SVG inherits it:
.icon { color: #111; }
@media (prefers-color-scheme: dark) {
.icon { color: #f0f0f0; }
}
This approach means one SVG file that adapts to any context. It’s the preferred approach for icon systems.
OLED and True Black
OLED displays (used in most modern smartphones) turn off pixels for true black, making the contrast between dark backgrounds and bright images even more pronounced than on LCD screens.
On OLED, a white-background product photo on a #121212 dark mode page creates an extreme luminance jump that looks jarring and burns more power than a seamlessly integrated transparent image.
If you have a significant mobile audience, prioritize transparent backgrounds over white-background images, and test specifically on an OLED device or an emulated one.
Practical Checklist for Dark Mode Image Support
Logos and icons:
- SVG with
currentColorwhere possible - PNG with
<picture>for separate light/dark versions if SVG isn’t feasible - Avoid
fill="white"without a dark mode override
Product images:
- Remove white backgrounds and export as transparent PNG or WebP
- Test edge quality on dark backgrounds
- Apply CSS brightness reduction for images that still look harsh
Hero and background images:
- Create a distinct dark-mode version with adjusted tone and contrast
- Serve via
<picture>or CSS media query
Diagrams and charts:
- If using dark text on white, invert via CSS or provide separate versions
- Test axis labels, annotations, and legend text visibility
Dark mode images aren’t a cosmetic concern. On platforms and OS combinations where dark mode is the default (now a majority on mobile), your images define how the product looks for most users.
Need transparent images that work cleanly on any background? Try the free Background Remover — precise edge detection without halos.