Firefox 57 shows dark input boxes/dropdown menus with dark text on Gnome dark themes

Question

Original Question (only about input boxes):

I use Arc-Dark theme on Ubuntu Gnome, and I know this issue existed on older Firefox versions too but it could be fixed with this Stylish script (which wasn't a great fix in itself as it screwed up the Downloads button).

Now the script doesn't work anymore, and I was thinking about reporting it to Mozilla, but they don't really have a GitHub repo for Firefox itself, only for separate components, so I don't really know where I should open the issue.

Is there a temporary fix for this? And could someone who knows how to properly do it report the issue to Mozilla or to the Gnome project (dunno what would be more appropriate)?

Edit:

While in the answers you can find a temporary workaround for the input boxes, the same dark text on dark background issue seems to happen in dropdown menus (not all of them though, which is weird, may be related to different HTML/CSS techniques to create them), and since it's not much discussed but the two issues are most likely linked, I'm adding it to this question. The way to fix it is probably similar to the ones provided below, only with a different entry in userContent.css, but it'd be nice if someone provided it here. I'm gonna edit my own answer if I have time to find it out myself.

Edit 2:

It looks like even buttons are black-on-black on some websites. Here's an example, to see the buttons select "new program" on the left, paste this example program there, and this example query in the bottom right panel, then hit "Run!".

Solution 1

I found the best solution was to add a string value in about:config for widget.content.gtk-theme-override to override the GTK theme. You can use a related theme with light text boxes (obviously this only works for consistency if said related theme exists). For example, using Arc-Dark set the override to Arc-Darker which has light widget elements.

Credit for the solution here: https://www.mkammerer.de/blog/gtk-dark-theme-and-firefox/

-- sss

Solution 2

Update:

I think I just found a solution.

Before Firefox version 46.0 you could set a theme by starting it like so:

> GTK2_RC_FILES=/usr/share/themes/Adwaita/gtk-2.0/gtkrc firefox

Since version 46.0 it required GTK-3:

> GTK_THEME=Adwaita:light firefox

Which hasn't been working anymore since version 57.

So now, for version 57.0.4, I tried both and it worked beautifully:

> GTK2_RC_FILES=/usr/share/themes/Adwaita/gtk-2.0/gtkrc GTK_THEME=Adwaita:light firefox

You could probably use any other theme that targets both, GTK-2 and GTK-3.

Then you may remove or rename the chrome/userContent.css

---

Is there a temporary fix for this? And could someone who knows how to properly do it report the issue to Mozilla or to the Gnome project (dunno what would be more appropriate)?

IMHO they are well aware of this behavior and after finding a solution, I'm assuming that it is desired as you obviously can choose a theme you want it to have.

Original Answer:

Actually, it is better to leave the !important keywords out.

The problem from your question arises on sites, that do not specifically set values for background resp. background-color css style tags so Firefox inserts default values.

With the !important keyword, all of the inputs and textareas of almost all sites would have this same (background-)color. But what you actually want is to override the default (resp. fallback) behavior of Firefox.

As text is almost never white but dark-grayish on websites, it would suffice to set background or background-color to some brighter value for dark gtk-themes. But as you're already at it you may also set the text color.

So in the chrome/userContent.css file, in your Firefox profile directory just add

input, textarea { color: #222; background: #eee; }

instead of

INPUT, TEXTAREA {color: black !important; background: #aaaaaa !important; }

as mentioned in the answer you linked to.

The colors #222 and #eee do work very well for me. However, you may change them according to your liking.

I hope it helps.

Solution 3

I've found a temporary fix, but I hope someone will manage to make Mozilla and/or Gnome know about this and think of fixing it for good.

Just do as this answer says, but use white in the CSS stylesheet instead of #aaaaaa, for some reason the latter displays as some strange grey on my browser.

Solution 4

The answer here https://askubuntu.com/a/8346/625256 explains how to disable GTK theming just for firefox and thereby fixing the dark text on dark background issue.

View more solutions

Comments

[Eärendil Baggins]

Problem is, some may like to have GTK theming on firefox to have it homogenous to their Gnome theme, but not the weird dark background on dark text in boxes.

[Oussema]

I honestly can't upvote you enough. I'm really grateful. It's finally working!

[Eärendil Baggins]

Again, this is still not what many users would want. I like my Firefox to use the default colors from the system theme, while having readable text-boxes/dropdown menus/buttons.

[ardila]

@EärendilBaggins until Firefox fixes it, there's no real solution other than a workaround. This was reported 18 years ago to Mozilla and still open bugzilla.mozilla.org/show_bug.cgi?id=70315

[Jack]

Adding this to you .desktop file for Firefox can we done like this: Exec=env GTK2_RC_FILES=/usr/share/themes/Adwaita/gtk-2.0/gtkrc GTK_THEME=Adwaita:light firefox If you update your Exec commands in .desktop in this way, then you can still use your Firefox launcher.

[AngryUbuntuNerd]

this issue seems to be fixed now and should ship with an upcoming firefox version: bugzilla.mozilla.org/show_bug.cgi?id=1527048

[smac89]

I set the value to High Contrast theme and this has fixed all the issues I had with dark input boxes. Note that the High Contrast theme comes from Gnome. If you are on Arch, install it from here