Dark Textboxes with Firefox

One of those small “grr” things that I finally figured out, so I’m sharing. 🙂 I like having a dark color theme (GTK theme), but they interact oddly with Firefox, sometimes causing text boxes that are nearly unreadable black on grey or black.

There’s a lot of attempts out there to try to fix this – but none of them entirely did the job… until I tweaked this one from Silent Voices a little bit.

1. Install Stylish.
2. Optionally, install Terminal Darkness or Twilight themes.
3. Write a new style (as Silent Voices describes), but use the following code:

@namespace url(https://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http), url-prefix(https), url-prefix(file) {

pre, select, input[type=”text”], input[type=”button”], input[type=”submit”] {
color: white !important;
background-color: #4C4039 !important;
background-image: none !important;
border-left-color: gray !important;
border-right-color: gray !important;
border-top-color: gray !important;
border-bottom-color: gray !important;
}
}

I only added input[type=”text”], but it made the difference. Note that a form that does not specify what kind of thing it is will still appear dark. There’s no real way around this without cosmetic problems (black square borders around transparent buttons, etc.).