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

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.