Support for picture/source/@media queries about website-dark-mode-switcher

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