Disable system style for Firefox form input elements

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

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.

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.