Support for picture/source/@media queries

[ybungalobill]

Background

The prefers-color-scheme: dark media query can appear not only in CSS, but also in the picture/source/@media attribute.

Proposed solution

Parse all picture/source elements, substitute true for prefers-color-scheme: dark, false for prefers-color-scheme: light. Since true and false aren't allowed syntactically, using something like min-width: 0px and max-width: 0px can be used in their place.

Note that we don't want the switcher to resolve a single source so that the selection stays responsive.

[rugk]

Oh, that sounds hard. 🤔

[rugk]

If anyone has an example website/snippet that would already help.

[ybungalobill]

<picture>
	<source media="(prefers-color-scheme: dark)" type="image/svg+xml" srcset="dark.svg" />
	<source media="not all and (prefers-color-scheme: dark)" type="image/svg+xml" srcset="light.svg" />
	<img src="default.png" height="32" width="180" />
</picture>

[rugk]

Okay thanks, I briefly looked into this and I can only say it is more complicated.
I created this fiddle: https://jsfiddle.net/uef8gdcy/4/

As I parse the document.styleSheets, which is the core of this add-on, and yeah there is a media, where this is exposed:

AFAIK, the current behaviour is actually buggy. The <style> tag media queries are ignored and all evaluated by this add-on. It cannot/does not differentiate between the media types.

So I've tried document.styleSheets[3].media.deleteMedium("(prefers-color-scheme: dark)") and it works. So yeah, we could modify that apparently. However, we would need to save the state somewhere there, as we currently extract and inject CSS manually. However now we would need to remember the previous state in order to be able to restore it when the toggle is triggered. 😃
So anyway, PRs are of course always appreciated.

That said, even this does not fix the image/picture element, which is yet another issue…

[rugk]

Hi, I have great news for you! According to my testing, the latest v2.0 release fixes this issue due to the way it now uses a completely new API to do "dark-mode-changing" "properly". For more information, please see the release notes. If the issue should not be fixed, please let me know.