Images and icons need variants prepared for dark backgrounds

What it is

A dark icon drawn for a light background becomes a near-black patch on a dark ground. Images and icons are asset files; they do not recalculate with theme variables the way text colour does. Dark appearance needs adapted assets: dark graphics on light, light or stroked graphics on dark, photographs isolated with a ground or a veil. Switching the page background and leaving the same PNG in place is not enough.

CSS turning type from black to white changes a computed value. A graphic baked into pixels has no computed value to change.

Why it happens

Bitmaps and icon fonts freeze shape in a grid or a glyph. Theme switching changes the CSS colour around them; colour inside the asset does not participate. Dark graphics therefore lose their edge on a dark ground. A dark-grey icon on a transparent ground is especially quiet: it reads as a stroke in light theme and as a missing file in dark. Photographs, product shots and light infographics without isolation become a glowing white rectangle on a dark page, or their detail dissolves into near-black.

SVG that paints fill with currentColor or a theme variable can move with type; SVG with colours frozen inside it is as rigid as a PNG. Multi-colour brand marks cannot simply invert — inversion yields a hue never approved — and need a separate dark lockup, not a runtime filter.

Studying it

Build an asset inventory: icons, marks, empty-state illustrations, product shots, infographics. Capture light and dark appearance, and mark “dissolved into the ground,” “glowing white rectangle,” “hue error after invert.”

Independent variables: asset kind (monochrome SVG / multicolour PNG / photo), whether a dark variant exists, whether inversion is done with a filter. Dependent variables: recognisable share on a dark ground, how often an icon is judged “missing,” hue errors on brand marks in dark.

Split “the page ground is dark” from “the card under the icon is still light.” The latter does not need a dark variant; the wrong variant will vanish on the light card. Forced high contrast rewrites asset colour again; a dark variant is not a high-contrast variant.

Where it stops holding

User-generated photos, screenshots and third-party ads cannot have dark-prepared variants; the container can be isolated (an edge or a light backing), the original must not be recoloured. Map tiles and satellite imagery destroy geographic encoding if recoloured, and usually stay as light islands. Purely decorative graphics with alternative text turned off lose no information if they dissolve, and rank below functional icons. Print and PDF export run on light paper and need not be bound to the screen’s dark variant.

Applying it

• Ship functional icons in light-ground and dark-ground pairs (or one SVG that follows currentColor). On theme switch, swap the asset; do not filter the same PNG.
• Give multi-colour marks a dark lockup. Do not invert at runtime.
• Isolate photographs and light infographics on a dark page with a backing or a hairline, so they neither dissolve nor glow as a white rectangle.
• How to check: switch to dark appearance and sweep navigation icons, empty states, marks and content images. Anything that dissolves, looks broken, or shows a wrong brand hue after invert is a missing adapted asset.

Related

• Same group: J2.15.1 Contrast in dark mode must be recalculated, not reused from the light palette · J2.15.2 System-forced high contrast can override custom colours and distort the design · J2.15.4 Theme switches must not drop state or focus
• Nearby: J2.10 Non-text Contrast · J2.05 Decorative Images · J5.13 System Accessibility Settings
• Search terms: dark mode assets · inverse icons · currentColor SVG