12

Since the update to Ubuntu 18.04 I use the dark theme 'Adwaita-dark' and have several input fields in Firefox there are not usable. The background and the color of the font is dark, similar colors. It would not be set a alternate theme, like the light theme of Adwaita that mentioned in this q/a. I search for an solution that leave the dark theme about all applications.

How is it possible to fix theme to use the input fields, see the strings to input the right content?

The screenshot below in Google Drive should illustrate the problem on the title field on left side, right from the 'doc' icon.

enter image description here

marked as duplicate by David Foerster, user68186, Zanna, Amith KK, Chai T. Rex May 19 '18 at 7:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

13

I fix them for me with a custom stylesheet for Firefox. Leave a custom style with the name userContent.css in the directory ~/.mozilla/firefox/<custom-key>.default/chrome/. You should also add the directory chrome, important with lowercase. Use the css code below to fix them for different input fields. The result is like the image below.

enter image description here

If you have trouble to find your folder for leave this stylesheet read this answer.

Copy the follow source to the custom stylesheet file userContent.css.

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: #eee;
  color: black;
  -moz-appearance: none !important;
}

body {
  background-color: white;
  color: black;
  display: block;
  margin: 8px;
  -moz-appearance: none !important;
}

If you face any problem on radio button or checkbox, after adding this CSS file, just remove -moz-appearance: none !important

  • 1
    Worked for KDE with Dark-Breeze theme on Ubuntu 18.04. Thanks! – Nat Azodnem Dec 14 '18 at 13:52

Not the answer you're looking for? Browse other questions tagged or ask your own question.