How to fix dark theme issues with Firefox

bueltge

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

bueltge

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to fix Firefox dark theme for YouTube even dark theme is turned off?

How to fix invisible form fields in Firefox while using Adwaita Dark Theme (or any other dark theme)

Cinnamon - How to fix dark inputs in web browser when using a dark theme?

How to set dark theme in YouTrack

How to fix Mocha invisible text on Solarized Dark iTerm2 theme

Theme Error - how to fix?

Using a dark theme in KDE with Gnome applications (e.g., Firefox)

Firefox dark theme has a white bar on top (17.10)

How to use NetBeans in Dark Mode with the Darcula Theme?

How to apply antd dark theme for a React App?

How to toggle dark theme for whole page?

Android: How to switch theme for dark mode?

Ionic how to know programmatically if the dark theme is applied?

How to avoid forced dark mode in Material theme?

How to set the holo dark theme in a Android app?

How to change the theme to dark in Google Colab?

Kdenlive dark theme on Ubuntu 20.04 (How to Enable?)

How to use dark theme for section of the screen

How to remove eclipse darkest dark theme?

How to change the titlebar/toolbar and NSButtons to a dark theme?

How to detect device theme (light/dark) in android?

How to set dark theme on Xamarin Forms UWP?

How to set Flutter app theme as to dark by default?

How to change StackOverflow's Dark theme to Another?

How to apply Dark Theme Using CSS File

How to bring the colab dark theme to Jupyter Notebook

How to change theme to dark on click on IconButton?

How to use SearchView from dark theme in Light Appcompat theme

How to add light theme and dark theme to Vaadin tooltip?