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 source is a mapping problem; the same source rendered differently points to a page-presentation investigation.

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.

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.

Itemlume 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.