Skip to Content

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.

Example of Dark Input in AWS Security Groups

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!