Title photo
frugal technology, simple living and guerrilla large-appliance repair
Fri, 30 Oct 2015

Fix for Firefox dark theme issues in GNOME 3

Hey Linux users, are you using GNOME Tweak Tool to choose the "Dark" theme, making your GTK3 applications dark and causing problems with white-on-white text in the Firefox browser?

I have. Even though I almost never use GNOME 3, I do have it installed, and the GNOME Tweak Tool's "dark theme" switch enables me to turn GTK3 applications like Firefox "dark" in their styling. Except that often you can't read text boxes on web sites because the "dark" theme turns the text white while also leaving the background white.


I also use a dark theme in Xfce, my main desktop environment (I think it's Adiwata Xfce Dark), but that only affects GTK2 apps.

I've tried many fixes to make Firefox usable, but here's the one that worked for me, courtesy of Fedora Forums user PabloTwo:

What you do is create a ~/.mozilla/firefox/*.default/chrome directory, create a file called userContent.css and dump this bunch of CSS into it:

/*
* Use this css file to eliminate problems in Firefox
* when using dark themes that create dark on dark
* input boxes, selection menus and buttons. Put this
* in the ../firefox/default/chrome folder or your
* individual user firefox profile chrome folder.
*/
input {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
textarea {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
select {
border: 2px inset white;
background-color: white;
color: black;
-moz-appearance: none !important;
}
input[type="radio"],
input[type="checkbox"] {
border: 2px inset white ! important;
background-color: white ! important;
color: ThreeDFace ! important;
-moz-appearance: none !important;
}
*|*::-moz-radio {
background-color: white;
-moz-appearance: none !important;
}
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
border: 2px outset white;
background-color: #eeeeee;
color: black;
-moz-appearance: none !important;
}
body {
background-color: white;
color: black;
display: block;
margin: 8px;
-moz-appearance: none !important;
}

I restarted Firefox after creating the userContent.css file and dumping this CSS into it.

And it solved my Firefox-with-GNOME-3-dark-theme issue. Thanks to Fedora Forums and PabloTwo for this fix.