How to fix dark theme issues with Firefox [duplicate]

Solution 1:

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.

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