Closed Bug 1717077 Opened 4 years ago Closed 4 years ago

Radio buttons and checkboxes have bad contrast with Dracula GTK theme

Categories

(Core :: Widget: Gtk, defect)

Firefox 89
x86_64
Linux
defect

Tracking

()

VERIFIED FIXED
91 Branch
Tracking Status
firefox91 --- verified

People

(Reporter: poperigby, Assigned: emilio)

References

Details

Attachments

(4 files)

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

  1. Activate the Dracula GTK theme: https://draculatheme.com/gtk
  2. Go to any webpage that has no CSS styling on their radio buttons or checkboxes, like https://cbracco.github.io/html5-test-page

Actual results:

It's difficult to determine whether a radio button or checkbox is selected or not because the fill color is a light purple, and the background is white. This started happening after I updated to Firefox 89.

Expected results:

The radio button or checkbox should have contrasting colors that makes it easy to see if it's selected or not. It was like this pre-Firefox 89.

OS: Unspecified → Linux
Hardware: Unspecified → x86_64

The Bugbug bot thinks this bug should belong to the 'Core::Widget: Gtk' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Component: Untriaged → Widget: Gtk
Product: Firefox → Core

It might be related to a feature added in 89 called non-native theme.
If so, setting widget.non-native-theme.enabled to false in about:config and restarting firefox should make the color problem go away.
I filed a similar bug last week: https://bugzilla.mozilla.org/show_bug.cgi?id=1715521

Yeah, that seems to fix it. Thanks.

Assignee: nobody → emilio

This should be better in 90 with bug 1709647, but still not perfect. This theme does something slightly weird which is that it specifies a semi-transparent selected_bg_color, but opaque selected_fg_color:

/* base background color of selections */
@define-color theme_selected_bg_color rgba(189, 147, 249, 0.5);
/* text/foreground color of selections */
@define-color theme_selected_fg_color #f8f8f2;

Which is not something any other theme I've seen does, fwiw. Anyhow it seems blending that with the bg_color (we need an opaque color) makes sense here.

Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true

While testing the above patch on a variety of gtk themes, I noticed that
selection colors were inconsistent (as in, from the old theme) when
switching gtk themes, and tracked that down to this call.

Since we only need to restore the theme when actually overridden, track
that instead.

Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/b873d938120e Make RestoreSystemTheme call a bit more fine-grained. r=stransky
Pushed by ealvarez@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/72cb70926e87 Prefer blending with theme_bg_color rather than white to compute accent color. r=stransky
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → 91 Branch
Flags: qe-verify+

I can't seem to be able to reproduce the issue on Firefox 89.0 on Ubuntu 18.04 x64. Can you please verify the fix on latest beta? You can find the build here.

Flags: needinfo?(poperigby)

I just tested on 91.0b7 and I'm still having the problem.

Flags: needinfo?(poperigby)

Can you post an screenshot of what you see? This is what I get, which looks like pretty decent contrast.

Flags: needinfo?(poperigby)

My apologies. It looks like I accidentally launched the wrong executable when testing. It actually is fixed on the latest beta. Thanks!

Flags: needinfo?(poperigby)

According to comment 12 and comment 13 I will mark this issue as verified fix. Thank you for checking this out.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: