Injected media query always overrides other media queries that should take precedence

[Sysix]

Bug description

When using prefer-color-mode: dark in css and after the rules I add another media query for min-width like: min-width: 768px. The Width-Query will executed before the Dark-Mode-Query.

Steps to reproduce

The the link for an live example:

https://jsfiddle.net/u3ojw2vc/2/

Actual behavior

Media-Query will be executed before Dark-Mode Query.

Expected behavior

Like native (in Chrome Browser tested). The styles on bottom should be executed later then the styles on top

System

Windows 10 / Android 8 Firefox 72 (Developer Edition) / Chrome (newest)

Possible solution

Parse the CSS file and replace it complete with a modified one. At the moment it looks like only the dark-mode Styles will be append to the normal Styles.

[rugk]

Looks like this in v ccb9911 in my testing:

Is not this what you expect?

[rugk]

Ah okay, so you expect no background in small windows there?

Well… yeah… I see the problem and your provided solution would be the only one I can imagine.

Feel free to submit a PR.

[rugk]

Though I have to say injecting the whole CSS again could also break things, e.g.:

• if there are other CSS files that take precedence that do not contain any prefers-color-scheme. They would not be recognized.
• If CSS styles are dynamically adjusted by JS, the add-on could overwrite these accidentally with it's own injected styles from the website's stylesheets.
• possibly more :thinking:

So maybe that's not a good idea. :thinking:

[Sysix]

if there are other CSS files that take precedence that do not contain any prefers-color-scheme. They would not be recognized.

I though about replace the prefer-color-scheme: dark media query with the own content. When the User switch back to Light theme, We can replace to orginal (in variable / cache) file

If CSS styles are dynamically adjusted by JS, the add-on could overwrite these accidentally with it's own injected styles from the website's stylesheets.

Javascript Changes should add a "style" attribute. And style Attributes are always prioritized. (Expect !important)

possibly more 🤔

Jeah possible

---

Another Solution (don't know if is possible):

Learn the Browser the media Query (if not already known) and set the prefer-color-scheme before parsing the CSS Files. Then the extraction could be removed

[rugk]

Your alternative solution is not possible, but the replacement basically is already done.Just not the whole file. Well… as said, you could hack around, try it out and send a PR if it works. :smiley:

See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS on how it basically works/for the API you need to use.

[Sysix]

I'm sorry, I don't have enough time to test/check this problem. For me it works on a real-life device (Chrome Mobile on Android 8). So when firefox (with your Plugin) has Problems, I don't really matter :). (sorry).

I hope that Mozilla will at a native Button / Option for that and don't need another Plugin to activate Dark Mode.

[rugk]

Indeed I have the same hope and once https://bugzilla.mozilla.org/show_bug.cgi?id=1547818 is solved this add-on can be trivially adjusted to always work and we would not have to care about these strange bugs. (Note for now you can also use an about:config entry to toggle that. Just FYI.)

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