Fixing Dark Input Boxes in Firefox
I recently began trying out Cinnamon as my desktop environment and I’ve been thoroughly enjoying it. The only issue I was having was occasionally a page’s form input fields would have a dark background while still having dark text making it impossible to read, and very difficult to write.
It wasn’t happening everywhere, and I couldn’t track down what about a website would cause the issue. Most prominently for me was when this showed up in AWS’s interface.
Searching around apparently this was an issue with dark GTK themes and has been a known issue for about 18 years and was re-reported again about 3 years ago. There have been a really bad workaround that people have suggested including extensions, custom user CSS, and using desktop shortcuts with environment variables.
None of these work well, will be inconsistent based on how you open Firefox, or might cause other issues with different websites. Generally I’m not a fan of using random extensions for security, stability, and performance reasons. Ultimately Mozilla hasn’t fixed this issue, but there is a workable override at this point.
To solve the issue we do need to override the GTK theme with a light one.
Generally people recommend Adwaita
for the light theme that fixes it and it
seems to work well for me. You can check and make sure that the theme is
available by checking the /usr/share/themes
directory on your system.
When you’ve confirmed the presence of the theme, open up Firefox and go to the
URL about:config
. This override value doesn’t exist by default so you’ll need
to right click anywhere in that page and go to New -> String
in that context
menu. For the preference name enter widget.content.gtk-theme-override
and for
the value enter Adwaita
. After refreshing the effected pages the background
color issue should be resolved.
If you’re making use of a user.js
to enforce configuration options you can
add the following line to it address the issue:
user_pref("widget.content.gtk-theme-override", "Adwaita");
A little side note in case someone comes looking for other options. There was
another about:config
option that some Stack Overflow answers recommended
changing, widget.content.allow-gtk-dark-theme
. The default is false
and
they’re recommending changing it to… false
. It’s not the answer to this
problem.
Hope this helps someone else out. Cheers!