Disable system style for Firefox form input elements

Question

I use a dark theme in Lubuntu called Dorian. I'm quite happy with it. However, Firefox seems to inherit certain system colors for its form input elements, making them very difficult to see.

For example:

If I change the foreground color, I should also change the background color of textboxes, which is fine now, but is light-on-dark.

I can imagine solving this in several ways:

1. Add a custom style sheet for Firefox to reverse the changes. (I use Stylish, so it's trivial to implement. However, CSS with form elements seems tricky.)
2. Modifications to Dorian (I think you can customize a GTK theme for particular programs.)
3. Disable the Ubuntu-Firefox-modifications Firefox addon.
4. Find a setting in Firefox to prevent loading of system colors for input elements.
5. Install Dorian Theme for Firefox. (I'm reluctant to this, since Dorian isn't actively updated, and Firefox is constantly.)

Of course, I also welcome other solutions I haven't thought of.

Solution 1

The CSS-based solutions are tricky to get right, in my experience. The one in Michael's answer worked on some sites but not all.

In Firefox 60, there's an easier solution. Go to about:config and set the following string value: widget.content.gtk-theme-override = Adwaita:light

(You have to right-click and select New -> String. Searching for gtk-theme-override won't find anything because the setting isn't there by default.)

Credit to Martin Stránský: https://bugzilla.mozilla.org/show_bug.cgi?id=1283086#c7

Solution 2

You can try the Text Contrast for Dark Themes extension.

Also, this older CSS solution still seems to work, although that's probably what you're using now.

Solution 3

I also use a dark theme (Adapta Nokto), and I've also run into quite a few websites that change the text color in inputs, but assume that the background color will be white (leading to completely unreadable text).

I explored the CSS option, and found this explanation of setting default user styles without a need for any browser extensions. Summary:

1. Your Firefox profile will need a userContent.css file in the right place. You can create it like this:

   • Change directories to your Firefox profile:
     cd ~/.mozilla/firefox/<your profile>/
   • Make a "chrome" directory if it doesn't exist
     mkdir chrome
   • Create a CSS file in this new directory
     touch chrome/userContent.css

2. Edit the newly-created userContent.css file to include base styles that you want to apply to all pages.

3. Restart Firefox to see the changes.

For starters, I added this to my CSS file:

input, textarea {
  background-color: #fff;
  color: #222;
}

This assumes some familiarity with CSS. If it's new to you, this is saying:

• Find all of the input and textarea elements on the page
• Make the background white (#fff is a hex code shorthand for white)
• Make the text color a dark gray (#222)

There are plenty of other elements you may wish to style, such as button and select, and you can get more specific with your inputs, like input[type=checkbox].

This doesn't exactly disable the use of your system theme, but it does at least allow you to override it and provide websites with defaults that are closer to what they expect.

Comments

[Michael Martin-Smucker]

The second link ("CSS solution") is no longer working. Could you elaborate on the CSS solution? Is it possible to change Firefox's global, user agent stylesheet without the use of extensions?

[Redsandro]

Sorry, I don't know. I switched to Chrome because I found Firefox's styling to be quirky at times, especially on a dark desktop.

[Bryan Head]

Unlike a lot of firefox settings, I had to restart Firefox for this to take effect. So don't worry if it doesn't take effect right away. Works perfect though!

[smac89]

I like this because it allows me to choose which sites I want to force standard colors for

[Pistos]

KDE users can set this value to a KDE theme name, such as "breeze" or "oxygen".