1736218 - Add some sort of UI to select content dark theme preference

Status: RESOLVED FIXED

(Firefox :: Settings UI, enhancement, P1)

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Gijs, do you know if this is ok to be put in about:addons -> Themes? It feels a bit more discoverable there.

Or perhaps is about:preferences -> Colors a better fit? Or both? Though that might be too much.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1736218 - Add a content-theme selector to about:addons. r=Gijs!,#extension-reviewers!

I think here's likely to be more discoverable, but lmk if you want this
in about:preferences instead.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=9e9feeac1ccddb12e33a66eec69e33a1774a8bb5

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Please use the try run above for testing. I believe it's neat because after bug 1736141 about:addons follows the content setting, so the setting change is visible immediately.

Comment 5

[:Gijs (he/him)]

Answered on phab - I think this is going to need some feedback from UX.

Comment 7

[magu]

Where is the option to change content dark mode?
The new change with content dark mode = browser dark theme is very problematic

Comment 8

[Emilio Cobos Álvarez (:emilio)]

about:config -> layout.css.prefers-color-scheme.content-override. Description of the values are here.

Comment 9

[laurens]

Making all browser content suddenly mimic browser theme is a bad "sudden" FF95 experience.
It's like forcing the one's windows to be painted over with the colour of the window frames.

At consider a standard (human accessible, not some about:config hack) setting along the lines of:

[x] Web content theme mirrors browser theme

In Settings - Language and Appearance.

Comment 10

[Danny Colin [:sdk]]

(In reply to laurens from comment #9)

Making all browser content suddenly mimic browser theme is a bad "sudden" FF95 experience.

Indeed. We got a couple of users on SUMO asking for help because of that change and we're in a not so pleasant situation where our only solution is to ask them to modify a preference in about:config. That's something we try to avoid at all cost. Hopefully, this patch get merged soon :).

Also, IMO as a SUMO contributor, it's easier to instruct folks to go modify something in about:preferences than in about:addons.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

(In reply to Danny Colin [:sdk] from comment #10)
I think some if not all of these reports are due to bug 1740518. I think Manjaro may ship with that pref enabled?

Comment 12

[[e-mail]]

This issue just popped up for me. Firefox updated to 95.0.1 and all the websites went black without any prior notice. I had to ask for help on social networks and modify about:config as explained above after trying to tinker with Colors preferences and disabling all themes.

Not a behavior you expect from a regular update.

Comment 13

[magu]

after a recent update about:config -> layout.css.prefers-color-scheme.content-override = 2 no longer works.
So the solution to the first broken decision was to make it even worse????

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Can you file a new bug? How does it not work? It definitely should: https://searchfox.org/mozilla-central/rev/3d7216311cd3bdc541bc7844fa6b2a0160e48a95/widget/nsXPLookAndFeel.cpp#1128

Comment 15

[ohforf]

Setting layout.css.prefers-color-scheme.content-override = 1 will also force Firefox's internal (chrome?) pages (settings, addons, preferences, etc.) to white even if the theme is set to Dark in about:addons.

Is it possible to have just the firefox internal pages respect the Theme separately from "actual" web pages?

Alternatively, will this new UI allow us to specify Light/Dark preference for internal pages and web content separately?

Comment 16

[Emilio Cobos Álvarez (:emilio)]

(In reply to ohforf from comment #15)

Is it possible to have just the firefox internal pages respect the Theme separately from "actual" web pages?

Right now it's not, we consider "content" everything that is in the content area (thus about:addons / about:preferences / etc). It is technically possible to special-case these, but it doesn't make a lot of sense IMO, because stuff like the extension settings and so on that are embedded in about:addons would have mismatched color-schemes, for example, which looks pretty bad.

Comment 18

[CenCerberon]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #16)

(In reply to ohforf from comment #15)

Is it possible to have just the firefox internal pages respect the Theme separately from "actual" web pages?

Right now it's not, we consider "content" everything that is in the content area (thus about:addons / about:preferences / etc). It is technically possible to special-case these, but it doesn't make a lot of sense IMO, because stuff like the extension settings and so on that are embedded in about:addons would have mismatched color-schemes, for example, which looks pretty bad.

It is on purpose that the download page and the library do not follow the value of layout.css.prefers-color-scheme.content-override?

Comment 19

[Emilio Cobos Álvarez (:emilio)]

Yes, those are browser UI pages, not content, and they follow the Firefox theme color-scheme (that has been happening for a while, pre-Firefox 95, fwiw).

Comment 20

[Rob Wu [:robwu]]

Has there any been request for UX feedback? The change to follow Firefox's theme by default causes UX/usability issues when custom themes are used: https://github.com/mozilla/FirefoxColor/issues/998

It would be nice to add a user-facing way to set the preference, and document this on SUMO and the release notes.

Comment 21

[Emilio Cobos Álvarez (:emilio)]

(In reply to Rob Wu [:robwu] from comment #20)

Has there any been request for UX feedback? The change to follow Firefox's theme by default causes UX/usability issues when custom themes are used: https://github.com/mozilla/FirefoxColor/issues/998

Yes, that's all this bug is about. I did reach out to UX the day after I submitted the patch (that's 3 months ago now) and got no reply, but it seems there's some movement (see above).

Comment 22

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1736218 - Expose theme-derived color-scheme to privileged code. r=gijs

This will be needed to determine whether following the Firefox theme
would produce light or dark colors.

Comment 23

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1736218 - Split "Fonts and Colors" into two sections in about:preferences. r=Gijs,dao

As per the UX design.

Depends on D140221

Comment 24

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1736218 - Implement website appearance chooser. r=Gijs,dao

The only thing missing are the icons. I chose two random DevTools icons
for testing.

Depends on D140222

Comment 25

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/00b9b6dd4f46
Expose theme-derived color-scheme to privileged code. r=Gijs

Comment 26

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1736218 - Simplify color-scheme content override pref to only be [dark, light, auto]. r=dao

Depends on D140222

Comment 27

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1736218 - Stop using heuristics to determine content color-scheme. r=dao

Use system color-scheme for content for anything that isn't explicitly
opted into.

Depends on D140375

Comment 28

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/00b9b6dd4f46

Comment 29

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1736218 - Add tooltip text to appearance chooser as aria-description. r=ayeddi,morgan,Gijs

Note that this depends on bug 1759925 to work.

Depends on D140223

Comment 30

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/401343283466
Split "Fonts and Colors" into two sections in about:preferences. r=Gijs,fluent-reviewers,preferences-reviewers,dao,flod
https://hg.mozilla.org/integration/autoland/rev/0c6b08498254
Stop using heuristics to determine content color-scheme. r=dao
https://hg.mozilla.org/integration/autoland/rev/cd031b3593fe
Implement website appearance chooser. r=Gijs,fluent-reviewers,preferences-reviewers,flod

Comment 31

[Morgan Reschenberg [:morgan]]

Attachment: hover_light_increase_contrast

Hi, I noticed the "light" theme image gets difficult to see if you hover it with Increase Contrast enabled on macOS. Is it possible to add a border around the window image, or change the hover background here?
I haven't tested this in Windows HCM yet, but we might have a similar issue with white-based HCM themes.

Comment 32

[Morgan Reschenberg [:morgan]]

Also, if you set the colors dropdown to "always" and leave "use system colors" unchecked, about:preferences gets styled with a light theme regardless of a user's selections in the web appearance section. (I'm testing with "use system auto" theme selected in about:addons, if that changes things).
While website colors will be overridden with the selections for background/foreground/etc. in the colors dialog (hence the warning), our about: pages are always themed light/dark with FF HCM, and they should respect this option.

Comment 33

[Emilio Cobos Álvarez (:emilio)]

(In reply to Morgan Reschenberg [:morgan] from comment #32)

Hi, I noticed the "light" theme image gets difficult to see if you hover it with Increase Contrast enabled on macOS. Is it possible to add a border around the window image, or change the hover background here?

Mind filing a follow-up for this? Happy to poke at this.

Also, if you set the colors dropdown to "always" and leave "use system colors" unchecked, about:preferences gets styled with a light theme regardless of a user's selections in the web appearance section. (I'm testing with "use system auto" theme selected in about:addons, if that changes things).
While website colors will be overridden with the selections for background/foreground/etc. in the colors dialog (hence the warning), our about: pages are always themed light/dark with FF HCM, and they should respect this option.

Sure, that is expected, and it is how it's working (thus the info box), or what am I missing?

Comment 34

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/401343283466
https://hg.mozilla.org/mozilla-central/rev/0c6b08498254
https://hg.mozilla.org/mozilla-central/rev/cd031b3593fe

Comment 35

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/24abde49deb0
Add tooltip text to appearance chooser as aria-description. r=morgan,Gijs,fluent-reviewers,preferences-reviewers

Comment 36

[Andreea Pavel [:apavel]]

Hi. I updated today to the latest nightly and wasn't sure why my bugzilla page went from dark to light since I've been using a dark theme for a while now (Lush -Bold). First instict was to play with the themes and even though I kept choosing dark ones, the website was still light.
In the end I got help from Emilio as it wasn't really intuitive what settings I should play with to get back to my previous appearance. Seemed easier the way it was before. Based on this experience, also filed bug 1760343 so if in the future I will change the theme I know how to make everything light/dark.

Comment 37

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/24abde49deb0

Comment 38

[Emilio Cobos Álvarez (:emilio)]

(as per bug 1750932 comment 14 +)

Release Note Request (optional, but appreciated)
[Why is this notable]: Users can now choose the preferred color scheme for websites. Theme authors can now make better decisions about which color scheme Firefox uses for menus etc.
[Affects Firefox for Android]: No
[Suggested wording]:
[Links (documentation, blog post, etc)]: https://groups.google.com/a/mozilla.org/g/firefox-dev/c/rtGNUHrDbDk/m/I8iy9GJ8AwAJ

Comment 39

[Dianna Smith [:diannaS] - on Leave, back on August 9th]

Release note added, please see https://www.mozilla.org/firefox/100.0a1/releasenotes/