44

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!".

5 Answers 5

49

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

4
  • 1
    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. Dec 18, 2018 at 5:29
  • @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
    – ardila
    Apr 24, 2019 at 8:30
  • this issue seems to be fixed now and should ship with an upcoming firefox version: bugzilla.mozilla.org/show_bug.cgi?id=1527048 Jun 17, 2019 at 13:25
  • 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
    – smac89
    Sep 6, 2020 at 7:39
7

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


Regarding to your questions:

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.

2
  • I honestly can't upvote you enough. I'm really grateful. It's finally working!
    – Oussema
    Jun 4, 2018 at 2:17
  • 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.
    – Jack
    May 22, 2019 at 4:57
2

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.

1

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.

1
  • 3
    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. Nov 20, 2017 at 13:25
0

Quick and dirty fix:

cd $HOME/.mozilla/firefox/*.default
mkdir -p chrome && cd chrome
echo 'input:not([type='button']):not([type='checkbox']):not([type='radio']):not([type='submit']),
textarea,
select {
  background-color: white !important;
  color: black !important;
  -moz-appearance: none !important;
}' > userContent.css
  • restart firefox

This does not fix buttons as I found that buttons look fine on most websites, and trying to fix the ones that don't look good screws up the ones that do.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .