Dark variant causes dart text on dark background in input with Firefox

[ddnexus]

Hi @nana-4. I got an issue with Firefox changing the style of certain search inputs in the page, reported for Equilux, that looks like a Materia issue. I tried it with a new installed FF on Ubuntu GNOME latest and the user tried it with Fedora 27 with both Equilux and Materia-dark and the problem is the same.

A couple screenshots here, so you can try the same urls and search boxes to reproduce:

Thanks

[nana-4]

Hi, thanks for reporting the bug.

I think it's not a Materia-dark/Equilux specific problem, but the problem of the entire dark themes. I believe this occurs in Adwaita-dark too. Although This should really be fixed by upstream Firefox, I'll investigate whether there is a workaround. ;)

[ddnexus]

It looks like a Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=519763 Reported fixed here (but it is not fixed at all): https://bugzilla.mozilla.org/show_bug.cgi?id=1158076

Also discussed here: https://askubuntu.com/questions/978184/firefox-57-shows-dark-boxes-with-dark-text-with-gnome-dark-themes

[ddnexus]

A solution that works in the latest FF;

add something like:

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

in the file <your firefox profile dir>/chrome/userContent.css (create the file if it does not exist).

[actionless]

i am always using a similar workaroung with dark themes as in the last comment so i think the only thing can be done is adding this topic to FAQ

[moretocome]

That is how ff behaves with all dark themes.

I can recommend this ff extension to fix your problems :) Maybe you can add this link to the FAQ @nana-4

Compared to editing userContent.css yourself this extension gives you an easy way to exclude sites, that break if you tweak the CSS (like my online bank for instance).

[abdulocracy]

This issue happens with all dark GTK themes, and unfortunately hasn't been fixed for more than a decade upstream. Instead of manually editing files and such, and installing unnecessary extensions, here's a cleaner workaround:

1. Navigate to about:config in Firefox.
2. Right-click and select New > String.
3. When prompted for the name, enter widget.content.gtk-theme-override.
4. When prompted for the value enter the name of a light GTK theme, preferably the light variant of your default GTK theme (e.g. Materia-compact if your default is Materia-dark-compact).
5. Restart Firefox and voila.