Need to modify gnome 3 theme for browser
Solution 1:
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?
Solution 2:
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.)