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.).

Was this post helpful or insightful? Buy me a coffee here or here and share this post with others!

Popular posts:

  • The difference between boundaries and rules
  • Two Ways to get CMYK Separation Using GIMP Instead of Photoshop in 2022
  • Organizing and Tiling Your Windows on #Openbox Using Only... Openbox
  • Weekend Project: Whole House and Streaming Audio for Free with MPD
  • Simple Smart Playlists for MPD (that work!)
  • If there's one Nazi (or a racist) at the table...

Recent Posts