13

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:

Checkboxes example Buttons 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. Textbox example

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.

  • Re. "However, CSS with form elements seems tricky" you can get guidance by right-clicking on the troublesome elements and choosing "Inspect Element" from the context menu. – DK Bose Jul 16 '17 at 17:15
19

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

  • 3
    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! – Bryan Head Mar 4 at 17:14
  • KDE users can set this value to a KDE theme name, such as "breeze" or "oxygen". – Pistos Jun 18 at 4:11
3

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.

  • 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? – Michael Martin-Smucker Jun 21 '18 at 17:11
  • 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. – Redsandro Jun 23 '18 at 23:07
  • 1
    I like this because it allows me to choose which sites I want to force standard colors for – smac89 Apr 18 at 21:19
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.