I have a dark GTK theme, I don't want firefox to ignore it all together, I only want the theme to effect Firefox's chrome (the buttons, address bar, bookmarks bar, etc., etc.), but I want the theme to be ignored by websites, websites should not be themed by the browser! It's a sin, and it makes everything look like absolute crap. If anyone has any idea how to fix it, that would be great, thanks!

Edit: In the image below, the top panel shows that text entered in the search box is nearly invisible when the "dark theme" is applied; the lower panel shows text clearly visible when the dark theme isn't applied.

Text in Google's search box

  • It's my understanding that standard (light) gtk themes such as Ambiance or Radiance do not affect the appearance of web pages for the most part. There have been a few posts here when users of dark themes find the search boxes in Google and text boxes are affected. Could you edit your question to include images of Firefox with and without your dark theme? Mentioning your OS as well as the name and source of the theme may help as well. – user25656 Feb 13 '13 at 11:56
  • I'm on Ubuntu 12.10, and yes, it's the form entries and combo boxes that usually get themed by the firefox theme. Here are some screen shots: imageshack.us/a/img571/1883/screenshotfrom201302140.png | imageshack.us/a/img687/1883/screenshotfrom201302140.png | imageshack.us/a/img14/4177/screenshotfrom201302140v.png | imageshack.us/a/img14/1883/screenshotfrom201302140.png – KoRnKloWn Feb 14 '13 at 8:46
  • That did it! However I should note I had 2 .default folders, (past installs/ backing up config files), and I found an easier way to open your profile folder (I did this to figure out which one was active). If you open the Help menu, then Troubleshooting Information, then you'll see an entry Profile Directory with a button Open Directory, clicking on that button will open your active randomstring.default folder directly. – KoRnKloWn Feb 14 '13 at 16:54
  • Also, you should have posted as an answer so I could give you some credit, vote you up ;) – KoRnKloWn Feb 14 '13 at 16:54

I hope I understand your situation correctly. It seems somewhat related to High contrast theme Firefox problem and to Need to modify gnome 3 theme for browser. And my answer below is essentially that which I provided to those questions!

Close (exit) all instances of Firefox. Go to your profile folder. It is here: ~/.mozilla/firefox/randomstring.default. In there, look for a subfolder called chrome.
If it doesn't exist, create it.
To create the chrome folder you can use your file manager (or the command line with mkdir chrome).
If chrome does exist, look for a file called userContent.css. Otherwise, create an empty text file with this name in the chrome folder. Now open userContent.css with a text editor and paste in or append 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.

  • 2
    I got a better result without the !important marker. If you leave it, the problem will be solved but all inputs that should be transparent became white. – ldavid Mar 14 '18 at 13:14
  • I was also able to use unset. INPUT, TEXTAREA {color: unset; background: unset; } – rharriso Jun 14 '19 at 16:43

For some reason I couldn't get the accepted answer to work, so I wrote a small Greasemonkey script to achieve the same effect: https://gist.github.com/einarmagnus/d741e30ad13b051d7971

// ==UserScript==
// @name        bright forms
// @namespace   einar
// @description Make all form elements default to light style to combat gtk theme
// @include     *
// @version     1
// @grant       none
// ==/UserScript==
function addDefaultCssRules(rule) {
  var styleElement = document.createElement('style');
  styleElement.type = 'text/css';
  document.head.insertBefore(styleElement, document.head.firstChild);
  styleElement.sheet.insertRule(rule, 0);
addDefaultCssRules('input, button, textarea, select { background-color:#fff;border-radius:5px;color:#111 }');

This worked for me.

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.