Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

KDE dark theme is troubling readability

more options

I have the same troubles that this guy: https://support.mozilla.org/en-US/questions/814083

Or this guy: http://hicksdesign.co.uk/journal/tweaking-firefox-with-css

I do not know how to force Firefox to stylise my inputs with a white background-color :

I have written this: textarea, input, select {

  background-color: #FFFFFF !important;
  color: #000000 !important;
 -moz-appearance: none !important;

}


But that's not working.

Can you please give me a solution. I really prefer dark themes. :)

I have the same troubles that this guy: https://support.mozilla.org/en-US/questions/814083 Or this guy: http://hicksdesign.co.uk/journal/tweaking-firefox-with-css I do not know how to force Firefox to stylise my inputs with a white background-color : I have written this: textarea, input, select { background-color: #FFFFFF !important; color: #000000 !important; -moz-appearance: none !important; } But that's not working. Can you please give me a solution. I really prefer dark themes. :)

Chosen solution

nils.acrimont wrote:

That's it! Many thanks! :)

You're welcome ^_^

nils.acrimont wrote:

Why do you just not recommand to use custom css? Seems better to me than installing a new add-on

As long as you managed to get it to work, there's no problem.

I don't recommend either userContent.css or userChrome.css because

  • On Windows, file extensions are hidden by default, so users often end up naming the files userContent.css.txt / userChrome.css.txt
  • The file names are case-sensitive. A single typo makes them not work (e.g. UserChrome.css instead of userChrome.css).
  • The files must be placed in a specific folder. This folder in turn must be placed under the profile folder, which isn't easy for everyone to find. Its name is again case-sensitive.
  • Firefox must be restarted for the changes to take effect. Styles applied with Stylish take effect immediately. If you semi-frequently install or modify styles, this is a huge plus.
  • Stylish lets you preview styles instantly before applying them. If you make a mistake in userChrome.css / userContent.css, you have to edit the files, restart Firefox and see if that helped, and if not, do it over again.
  • Previewing styles in Stylish shows you if there are any CSS errors that would make the style not work.
  • With Stylish, you can install any style from http://userstyles.org with the click of a button. These styles can be checked for updates from the Add-ons Manager, just like add-ons.
Read this answer in context 👍 0

All Replies (3)

more options

That should work fine. There are mainly two ways to go about it.

  1. Install Stylish and restart Firefox when prompted.
  2. Click the Stylish icon on the navigation toolbar and choose Write New Style, then Blank style.
  3. Paste the following in the text box, give the style a name, then click the Save button.

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

If you don't want to install an add-on, you can use the userContent.css file instead, but I don't recommend it.

1. Start a text editor like Kate. 2. Paste the following in a new file.


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

3. Save the file as userContent.css to your desktop. Note that the file name is case-sensitive. 4. In Firefox, type about:support into the address bar and press Enter. 5. Click the Show Folder button. Your Firefox profile folder opens in your file manager. 6. Create a new folder called chrome — again note the name is case-sensitive. 7. Move the userContent.css file from the desktop into the chrome folder. 8. Restart Firefox for the changes to take effect.

more options

That's it! Many thanks! :)

Why do you just not recommand to use custom css? Seems better to me than installing a new add-on, especially when we know that firefox has been mocked for its poor performance related to add-on (firebug and so on).

Anyway, thank you again, it works now.

more options

Chosen Solution

nils.acrimont wrote:

That's it! Many thanks! :)

You're welcome ^_^

nils.acrimont wrote:

Why do you just not recommand to use custom css? Seems better to me than installing a new add-on

As long as you managed to get it to work, there's no problem.

I don't recommend either userContent.css or userChrome.css because

  • On Windows, file extensions are hidden by default, so users often end up naming the files userContent.css.txt / userChrome.css.txt
  • The file names are case-sensitive. A single typo makes them not work (e.g. UserChrome.css instead of userChrome.css).
  • The files must be placed in a specific folder. This folder in turn must be placed under the profile folder, which isn't easy for everyone to find. Its name is again case-sensitive.
  • Firefox must be restarted for the changes to take effect. Styles applied with Stylish take effect immediately. If you semi-frequently install or modify styles, this is a huge plus.
  • Stylish lets you preview styles instantly before applying them. If you make a mistake in userChrome.css / userContent.css, you have to edit the files, restart Firefox and see if that helped, and if not, do it over again.
  • Previewing styles in Stylish shows you if there are any CSS errors that would make the style not work.
  • With Stylish, you can install any style from http://userstyles.org with the click of a button. These styles can be checked for updates from the Add-ons Manager, just like add-ons.