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