Why does my product change color only when the store switches to dark mode?

Hold the source and display constant

Use one approved opaque product photograph and the same selected variant on the same screen. Record the loaded source in light and dark page modes. Open the actual file separately and compare its recognizable colors under controlled viewing conditions. A different selected URL is a source-selection branch to inspect, not proof that mapping is wrong: responsive or CDN variants can legitimately use different URLs. Confirm the merchandise and view. The same URL is also not proof of unchanged file bytes; retain the source version or other available content evidence before isolating page presentation.

MDN describes CSS filter effects such as color shifts, inversion and brightness changes. That is a possible mechanism, not a diagnosis of every dark-mode difference. Background contrast, transparent edges and browser extensions can create other observations.

Write a mode-only failure record

In this fictional kettle store, the approved cream enamel photo is unchanged when opened separately. In the store’s dark theme, the same loaded file appears dark blue, while its ordinary light theme looks cream. A maintainer finds a broad inversion rule affecting the media wrapper. The example is invented to illustrate the branch; it is not a measured defect in your theme.

Request a presentation repair with a safe scope

Give the maintainer the file identity, mode sequence and screenshots. Ask them to inspect filters on the photo and its ancestor elements, theme-specific overlays and broad dark-mode rules. Repair the page treatment in a draft theme while preserving readable controls and surrounding text. Do not remove the user’s preferred page theme merely to avoid reviewing its media styling.

Avoid creating an oppositely recolored export to cancel a suspected filter. That workaround could corrupt the same image in a feed, another placement or a future theme. Keep legitimate transparent-edge and color-profile checks separate when those are the actual cause.

A useful fictional repair record is: product/variant and view; light-mode selected URL; dark-mode selected URL; retained asset version; observed computed effect on the image and its ancestor; one scoped draft change; repeated visual result. MDN’s currentSrc identifies the browser-selected image URL, not a content fingerprint. Have the maintainer inspect it using normal developer tools; do not run an unreviewed script against a live store.

If removing the suspected wrapper effect in the draft restores the approved presentation while the source version remains controlled, that supports this rendering branch. If it does not, retain the unresolved result instead of declaring a filter diagnosis. CSS filter documentation establishes a possible mechanism only. For a difference already visible in the standalone export, continue with source/export color review; for an outline limited to transparency, use edge compositing review.

Verify the same approved merchandise in both modes

Repeat the selected-source comparison after the theme repair. Check front, detail and context photos that share the wrapper, then inspect navigation labels and purchase controls in both modes. A faithful product photograph and readable surrounding interface are separate acceptance points.

Use the gallery interaction review as a manual review record. Sample rows are fictional. It does not connect to, import into or modify an external store or production machine.

CartVisual can help prepare assets based on approved references, but it does not inspect your live CSS or guarantee physical color matching. Store rendering repair belongs to the theme owner, with controlled product-color review where that decision matters.

The downloadable gallery worksheet currently contains two fictional, pending sample rows, for dialog focus return and mobile source selection. Copy its nine-column format and add rows for this article’s actual test steps; neither existing row records these checks for your store. Keep observed results and pending actions distinct. Downloading it does not run a test.