1700983 - Dark theme proton colors are not apply on About pages

Status: NEW

(Firefox :: Theme, defect, P3)

Description

[Anca Soncutean, Desktop QA]

Attachment: dark theme.gif

Affected versions

• 89.0a1 (2021-03-25)

Affected platforms

• Windows 10
• macOS 10.15

Steps to reproduce

1. Set Dark theme at the OS level
2. Make sure browser.proton.enabled is set on true in about:config
3. Open a random About page (eg. about:newtab, about:preferences)
4. Interact with elements on the page
5. Observe the color applied on elements

Expected result

• The color used respects the Proton theme color for dark theme

Actual result

• The color used on dark theme doesn't respect the Proton theme one

Regression range

• Not a regression, Proton specific

Additional notes

• If we are to take consistency into consideration, for exemple, about:newtab/about:home it does not look very pleasant to the eye, when navigating the page from top to bottom, it can be noticed that the URL bar/ Toolbar have specific proton theme colors for dark mode , while down the page, the color applied is the one used for Light theme (see screencast)
• Set as S3, I would consider this a much higher priority since the inconsistencies greatly affect the overall proton experience

Comment 1

[Cristian Fogel [:cfogel]]

Confirmed with Firefox 89.0a1(2021-03-28) that the issue manifests on Ubuntu 20 as well.

Comment 2

[Stanley Chan]

Attachment: Screen Shot 2021-04-20 at 1.21.43 PM.png

I can confirm that this occurs for me as well; screenshot attached from a few days ago when I submitted a #foxfooding report

Application Basics
------------------

Name: Firefox
Version: 90.0a1
Build ID: 20210421212740
Distribution ID:
Update Channel: nightly
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:90.0) Gecko/20100101 Firefox/90.0
OS: Darwin 19.6.0 Darwin Kernel Version 19.6.0: Tue Jan 12 22:13:05 PST 2021; root:xnu-6153.141.16~1/RELEASE_X86_64
Rosetta Translated: false
Multiprocess Windows: 2/2
Fission Windows: 2/2 Enabled by user
Remote Processes: 17
Enterprise Policies: Inactive
Google Location Service Key: Found
Google Safebrowsing Key: Found
Mozilla Location Service Key: Found
Safe Mode: false

Crash Reports for the Last 3 Days
---------------------------------

Nightly Features
----------------

Name: DoH Roll-Out
Version: 2.0.0
ID: [e-mail]

Name: Firefox Screenshots
Version: 39.0.1
ID: [e-mail]

Name: Form Autofill
Version: 1.0.1
ID: [e-mail]

Name: Picture-In-Picture
Version: 1.0.0
ID: [e-mail]

Name: Web Compatibility Interventions
Version: 22.0.0
ID: [e-mail]

Name: WebCompat Reporter
Version: 1.4.1
ID: [e-mail]

Remote Features
---------------

rollout-doh-nightly-rollout-to-all-us-desktop-users-nightly-74-80-bug-1613481: active

Comment 3

[Mark Striemer [:mstriemer]]

The checkboxes look like you're in "increase contrast" mode in macOS. Is that the case Stanley? Can you provide a screenshot of the preferences page pre-proton with your settings?

As far as the initial bug, I think most in-content pages should've been fixed by bug 1699250, but I still see the new tab page with the pre-proton blue focus colour.

Comment 4

[Stanley Chan]

Attachment: macOS-increase-contrast

(In reply to Mark Striemer [:mstriemer] from comment #3)

The checkboxes look like you're in "increase contrast" mode in macOS. Is that the case Stanley? Can you provide a screenshot of the preferences page pre-proton with your settings?

As far as the initial bug, I think most in-content pages should've been fixed by bug 1699250, but I still see the new tab page with the pre-proton blue focus colour.

Hey mstriemer -- apologies for the delay.

You are 100% correct; increase contrast on in macOS is turned on and makes it such that Proton does not apply dark-styling to the about:* pages. I've attached an image with that preference turned on and off.