How to tell websites to use light themes while having a dark UI in Firefox? (accessibility)

[j127]

Something recently happened with Firefox themes so it now tells websites to display dark themes. I don't want dark themes on websites, because I have a lot of trouble reading them, but I do want a dark UI on my main Firefox profile to distinguish it from my other Firefox profiles. (I use multiple Firefox profiles instead of using Firefox + Chrome.)

I also have trouble distinguishing the active tab when Firefox's own UI is set to a light color. I use custom CSS to make it even more clear, but that CSS is made for a darker UI and it breaks with a lighter UI.

It seems like with Firefox Color, if I set the Firefox UI to have darker colors it automatically causes websites to show me dark themes. It even happens on my own sites. Right now I'm building a Django site and I can barely read the text on the admin dashboard because Firefox is telling it to show a dark theme.

There is no system-wide theme setting on my OS, as far as I know (i3wm on Ubuntu). I set ui.systemUsesDarkTheme to 0 in about:config, but that doesn't seem to work.

Is there a way to fix this so that websites never show me dark themes, but Firefox's own UI (tabs and menus) remains dark? It has been terribly frustrating, because I work on the Web, and it's now difficult to read things. Firefox's own theme shouldn't be linked to website themes, or if it is, there should be an easy way to de-link them.

[Rob--W]

Firefox 95 changed, to follow the extension theme by default instead of the system theme. To revert to the previous behavior, visit about:config and set layout.css.prefers-color-scheme.content-override to 2.

The complete set of values for this preference is as follows:

• 0 to force the dark theme.

• 1 to force the light theme.

• 2 to follow the system theme (default until Firefox 94).

• 3 to follow the extension theme (new, default since Firefox 95). Introduced in https://bugzilla.mozilla.org/show_bug.cgi?id=1529323

This is the ticket that tracks a user-facing setting to change this: https://bugzilla.mozilla.org/show_bug.cgi?id=1736218

[j127]

Thanks for the tip.

Linking those two things without an easy, obvious way to de-link them in the settings is a huge mistake, because dark mode creates accessibility problems, and users will never be able to figure out the solution on their own. A dark Firefox theme doesn't mean that a user wants the text on websites to turn dark.

[td47]

I have only just found this from reading the Nightly Whats New, in the latest 100a (it did not seem to be publicised much). I too use a CSS (on my "daily" FF98.02), but mainly because of me wanting to go back to the pre-proton look, with better tabs and with separators. I just wanted to say, that with the latest Nightly, I DO use the same theme (Firefox Lightblue), as on my "daily" FF, and it works fine still, with this layout.css.prefers-color-scheme.content-override set to 3.

[zomars]

* `2` to follow the system theme (default until Firefox 94).

This doesn't work on macos. I'm using firefox with a dark theme but it's not repecting the system preference (light),