3

I have recently begun using the DarkGreen theme for Gnome 3, however there are some problems on some webpages in FireFox regarding text input fields. This happens in the search field on Google, some fields on Facebook, etc...

This theme uses a dark background and light color text for input fields by defaut. I have managed to modify the foreground color of input text succesfully for those fields that were never affected (from near white to gray), but it doesn't help for the "broken" fields. I also want to change the background color for all input fields to white, but I get no luck with that either.

In the theme folder there is a gtk folder with a css file. Here are the relevant contents, the comments are what I changed:

@define-color theme_base_color #202020;
@define-color theme_text_color #25DC00; /* #ffffff */
@define-color theme_bg_color #121212;
@define-color theme_fg_color @theme_text_color;
@define-color selected_bg_color #3E8753;
@define-color selected_fg_color #ffffff;
@define-color theme_selected_bg_color @selected_bg_color;

@define-color menu_bg_color #555555;
@define-color menu_fg_color @theme_text_color;

@define-color menu_combobox_border @theme_selected_bg_color;
@define-color menu_separator mix (@theme_bg_color, @menu_bg_color, 0.90);

@define-color insensitive_bg_color alpha(#0b0b0d, 0.0);
@define-color insensitive_fg_color alpha(#717171, 0.50);
@define-color insensitive_border_color alpha(#717171, 0.50);

@define-color entry_text_color /* #fafafa */ #707070;
@define-color entry_background_a #ffffff;
@define-color entry_background_b #ffffff;
@define-color entry_background_c #ffffff;
@define-color entry_background_d #ffffff; /* 121212 */

@define-color frame_color #707070;

Is this CSS file the only thing I would need to change?

MarioDS
  • 183

3 Answers3

5

I'm suggesting a different way that is specific to Firefox to achieve what you want.

Close (exit) all instances of Firefox.
Go to your profile folder. It is here: /home/your_name/.mozilla/firefox/randomstring.default
In there, look for a subfolder called chrome. If it doesn't exist, create it.
If chrome does exist, look for a file called userContent.css. Otherwise, create an empty file with this name in the chrome folder.
Now open userContent.css with a text editor and paste in this code:
INPUT, TEXTAREA {color: black !important; background: #aaaaaa !important; }

Save the file (as plain text) and close the text editor.
Restart Firefox.
You should now have black text on a light gray background. You can use whatever color combination you prefer.

Notes: chrome and userContent.css are case-sensitive and should be spelled correctly.
The settings here will take precedence over those in the OS theme and will remain the same in Firefox irrespective of which gtk theme you switch to.

(By the way, you maybe interested in the Stylish extension and a whole variety of styles created by users and hosted at userstyles.org.)

Edit:
I'm providing some links related to users wanting Firefox not to be influenced by the OS (gtk) theme. Please note that I have not checked whether the solutions suggested still work or not. These links are more by way of background:
How can one make firefox ignore my GTK theme entirely?
Bug 70315 - text in menus and boxes unreadable if using dark GTK theme (for Seamonkey)
Any way to prevent Firefox from using the OS native colors?

Community
  • 1
1

I found the following on the ArchLinux Wiki, which can directly be applied to the problem here. I found the result to be nicer than the previous one from user25656.

The approach is the same: You create /home/<your_name>/.mozilla/firefox/<randomstring>.default/chrome/userConent.css with the following content:

input:not(.urlbar-input):not(.textbox-input):not(.form-control):not([type='checkbox']) {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

#downloads-indicator-counter {
    color: white;
}

textarea {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

select {
    -moz-appearance: none !important;
    background-color: white;
    color: black;
}

(I can't comment due to my low reputation, that's why this is a new answer.)

dd23
  • 111
0

I followed dd23's suggestion, and it mostly worked, although only for half of the messed up elements on affected pages. I found a different CSS that appears to work a bit better.

By the way, you can also use the Stylish Firefox Add-On to apply this CSS.

/*
* Use this css file to eliminate problems in Firefox
* when using dark themes that create dark on dark
* input boxes, selection menus and buttons. Put this
* in the ../firefox/default/chrome folder or your
* individual user firefox profile chrome folder.
*/
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white ! important;
background-color: white ! important;
color: ThreeDFace ! important;
-moz-appearance: none !important;
}
*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}

Solution from PabloTwo on the Fedora forums. This is also mentioned in comment 15 on the Mozilla bug report. Yup, this is a known bug.

CodeMouse92
  • 276