Firefox - default colour scheme for inputs/forms?

Question

I am using Linux Mint 18.3 with a dark theme. thus the default text colour (for the linux system) is light grey and the background dark grey.

Firefox uses these colours for text inputs/forms (light grey) and checkboxes (dark grey).

However Chromium has it's own standard colours. This is what I want for Firefox.

I know that you can set custom css-settings in the userContent.css but this overwrites it for all input forms, not just the ones which are not styled by the website itself.

Is there a way to make Firefox also use other default colours like Chromium for elements that are not styled otherwise?

Answer 1

I use mint, and I had the exact same issue. This worked for me:

Go to ~/.mozilla/firefox/randomName.default. Create a new folder named chrome (If there is a chrome folder already present rename it to old-chrome). Within the chrome folder create a new file named userContent.css and paste the following code.

@-moz-document url-prefix(about:blank) {*{background-color:#202020;}}
/*
* 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;
}

save the file and restart Firefox. Your problem should be fixed. Good luck. In case you need to change it back, just delete the chrome folder and restart Firefox again.