Firefox 67 introduced the new great prefers-color-scheme for websites. (see Bug 1494034)
As an add-on, I want to manipulate the light/dark state of web pages independently of the system state and per website, because:
- users may want a dark system style, but light websites
- users may want a light system style, but dark websites
- users generally want more flexibility here
- users use a system that actually does not support system styles (prefers-color-scheme), e.g. Windows 7, some (non-GNOME?) Linux distros, etc.
If you look on AMO, there are many "dark-style/theme" add-ons, currently applying their own custom CSS. If they, could, however detect that a website offers a "native dark" mode, they could choose that instead of their own custom overwrite.
After asking on Discourse on how to do that, I got a pretty hard workaround working (thx also to the tips from Stackexchange).
I've later answered my own question on Stackexchange and described the workaround there. Basically I extract the CSS manually and manually apply it. (JS needed, too, BTW…)
You can find it on AMO, if you want to try it out: https://addons.mozilla.org/de/firefox/addon/dark-mode-website-switcher/?src=external-bugzilla (or on GitHub)
Obviously, there are several problems with that approach:
- As websites likely do not implement separate "prefers-color-scheme: light" it is nearly impossible to force a website to be light, when your system style is dark. Because you would need to have a generic way to "invert" a whole list of CSS or disable existing CSS somehow…
- As already mentioned, this is a hard and cumbersome workaround to implement.
- Overwriting the JS alone is very hard because for faking the return value of matchMedia you cannot create a new MediaQueryList. (
new MediaQueryList() is not specified/possible.)
- Even if you all overwrite the JS, you also need to care about the listeners that websites could actually attach to that… yet again, it get's complicated.
- Also as for CSS media queries, if you only have
(prefers-color-scheme: dark) this may be possible, but when websites concatenate multiple factors with
and or so, we'll have another level of complexity.
- After all, as this takes random CSS from websites and re-applies it, this may also easily break websites.
- Way 1: Introduce some general way to manipulate media queries/CSS.
- Way 2: Introduce some way to overwrite "prefers-color-scheme" globally and(/or better) per tab/website.
- Also, some way to detect whether a website even offers such a mode would be nice. (Okay, you can look through the CSS again, but this is not-so-nice, as I've explained already.)
Another advantage this would have:
- Maybe, we could thus also control all pages, i.e. internal Firefox pages like about:newtab or about:addons (see Bug 1519547), without "serious" (special/many) permissions, as we do not need access to the data directly.
That said, things like Bug 1529323 could eliminate most use cases, but I still think there are many flexible combinations or so that would make sense. (see my listed use cases above.)