Support <style> tags as well as <link> for theme styles

[fastpok]

I wanted to use <style ...> tags instead of <link rel="stylesheet" ...> but this didn't work.

Here is my example:

<style media="(prefers-color-scheme: light)">body {color: red;}</style>
<style media="(prefers-color-scheme: dark)">body {color: blue;}</style>

I think this code is responsible for that.

dark-mode-toggle/src/dark-mode-toggle.mjs

Lines 126 to 133 in b6723cd

	// We need to support `media="(prefers-color-scheme: dark)"` (with space)
	// and `media="(prefers-color-scheme:dark)"` (without space)
	this._darkCSS = doc.querySelectorAll(
	`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`,
	);
	this._lightCSS = doc.querySelectorAll(
	`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"]`,
	);

[tomayac]

Wait, I was wrong. Re-opening the Issue.

[fastpok]

Mozilla says <style> tag does support media queries in attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

[tomayac]

Can you help me understand the use case? The advantage of <link rel-stylesheet media> is dynamic loading, whereas <style> always needs to be loaded.

[fastpok]

Oh, the thing is, I'm working with a rather exotic setup, and it wasn't very convenient for me to link to the file. There is no critical problem with this, it was just more convenient to do it using the style tag for simplicity. However, I had to spend a little time to figure out why the theme switch wasn't working.

[tomayac]

I think the code location you pointed at is indeed the right one to look. Are you in a position to open a PR with a proposed fix, so the query selector accepts both link and style?

[fastpok]

Yes, I will try. Thank you for such a quick feedback.

[tomayac]

Fixed via #94.