payloadcms / payloadcms/payload
LightDarkImage issues in Payload docs
@zubricks is already working on this.
Since Jan 20, 2026.
- Dominant language
- TypeScript
- Stars
- 44.8k
- Forks
- 4.2k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 53
Description
The <LightDarkImage> component loads both the light and dark versions of an image when in dark mode.
On page load, the light image briefly flashes before being replaced by the dark image. Network logs confirm that both versions are requested.
Examples:
- https://payloadcms.com/docs/admin/overview
- https://payloadcms.com/docs/fields/checkbox
- https://payloadcms.com/docs/fields/json
Additionally, when this page is opened directly in dark mode, only the light image is displayed. The dark image is never loaded. However, if you navigate to the page from another docs page, the dark image appears correctly.
Tested on the latest versions of Chrome, Safari, and Firefox on macOS 15.3.1 with system appearance set to "Dark". The issue does not occur when appearance is set to "Light" – only the light image is loaded, as expected.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.