Closed Bug 1736218 Opened 2 years ago Closed 2 years ago

Add some sort of UI to select content dark theme preference

Categories

(Firefox :: Settings UI, enhancement, P1)

enhancement

Tracking

()

RESOLVED FIXED
100 Branch
Tracking Status
relnote-firefox --- 100+
firefox99 --- wontfix
firefox100 --- fixed

People

(Reporter: emilio, Assigned: emilio)

References

(Blocks 1 open bug)

Details

(Whiteboard: [fidefe-2022-mr1-colorways])

Attachments

(6 files, 2 obsolete files)

No description provided.

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.

Flags: needinfo?(gijskruitbosch+bugs)

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

Depends on: 1736141

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.

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

Flags: needinfo?(gijskruitbosch+bugs)

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

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

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.

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

Severity: -- → S2
Type: task → enhancement
Priority: -- → P1

(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?

See Also: → 1740850

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????

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?

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

(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?

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

Blocks: 1743986
Whiteboard: [fidefe-2022-mr1-colorways]

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.

(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).

Status: NEW → ASSIGNED
See Also: → 1749837

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

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

Depends on D140222

Attachment #9246349 - Attachment is obsolete: true
Keywords: leave-open
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/00b9b6dd4f46
Expose theme-derived color-scheme to privileged code. r=Gijs
Depends on: 1750932
Attachment #9266324 - Attachment description: Bug 1736218 - Split "Fonts and Colors" into two sections in about:preferences. r=Gijs → Bug 1736218 - Split "Fonts and Colors" into two sections in about:preferences. r=Gijs,dao

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

Depends on D140375

Attachment #9266325 - Attachment description: Bug 1736218 - Implement website appearance chooser. r=Gijs → Bug 1736218 - Implement website appearance chooser. r=Gijs,dao
Attachment #9266551 - Attachment is obsolete: true
Depends on: 1759925
Pushed by ealvarez@mozilla.com:
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

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.

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.

(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?

Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → 100 Branch
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/24abde49deb0
Add tooltip text to appearance chooser as aria-description. r=morgan,Gijs,fluent-reviewers,preferences-reviewers
Blocks: 1760343

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.

Blocks: 1760709
Depends on: 1760776

(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

relnote-firefox: --- → ?
No longer depends on: 1760776
See Also: → 1760776
QA Whiteboard: [qa-100b-p2]
Component: Theme → Preferences
Blocks: 1749837
See Also: 17498371762081
Blocks: 1768229
See Also: → 1811317
Blocks: 1817888
You need to log in before you can comment on or make changes to this bug.