zoomed image ignores prefers-color-scheme in <source>

[ayushnix]

Bug description

When using <picture> and <source> elements with the prefers-color-scheme media query, medium-zoom ignores them when image is zoomed in and it falls back to the <img> element inside <picture>.

How to reproduce

The following code results in medium zoom using the initial-commits-light.png when zoomed in regardless of the browser theme. Even if the dark version of the image is displayed, zooming in shows the light version.

<picture>
<source srcset="/initial-commits-light.png" media="(prefers-color-scheme: light)" data-zoomable="">
<source srcset="/initial-commits-dark.png" media="(prefers-color-scheme: dark)" data-zoomable="">
<img src="/wiki/images/initial-commits-light.png" data-zoomable="">
</picture>

Expected behavior

The zoomed image should be shown according to the browser theme.

Reproducible example

I'm not sure why but you might need to reload the embedded browser to make the image zoomable.

Link to the bug reproduction

Environment

• Browser: Firefox 86 and Chromium 89
• medium-zoom version: 1.0.6