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

A much simpler approach, which also produces more aesthetically pleasing results, is to ask Firefox to use the light version of the GTK scheme for rendering form inputs.

To do that, navigate to about:config, promise to be careful by clicking "I accept the risk!" and then create a new string parameter widget.content.gtk-theme-override. Use the name of your favorite "light" theme as the value (in my case, it's Yaru). This configuration change will take effect after the next restart of Firefox.

Problem solved!

Answer 2

the answer from @VishnuVS really is the only practical/working solution I tested so far. I added some styling (source: https://www.inserthtml.com/2012/06/custom-form-radio-checkbox/) as the check boxes and radio buttons where not working properly (for me).

@-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;
}
input[type="checkbox"],input[type="radio"] {
appearance:none;
}
input[type="checkbox"] {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
input[type="checkbox"]:active, input[type="checkbox"]:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
input[type="checkbox"]:checked {
background-color: #e9ecee;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
}
input[type="checkbox"]:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7;
}
input[type="radio"] {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
}
input[type="radio"]:checked:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #99a1a7;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
}
input[type="radio"]:checked {
background-color: #e9ecee;
color: #99a1a7;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
input[type="radio"]:active, input[type="radio"]:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

Answer 3

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.

Answer 4

You can choose in Firefox any color you like in: 3-bar menu (or 'Tools') > Add-ons > Themes.

Or you could change the system colors in system settings.

If this does not help then read the Firefox support answer:

Change Font Color

To change the font color:

1. Click the menu button and choose Options > Preferences.
2. Select the Content General panel.
3. Under Fonts & Colors, click the Colors… button.
4. Clicking on any of the colored rectangles will show you the possible colors you can choose from. Select the color you want by clicking one of the colored rectangles.
5. Click OK to close the Colors window.
6. Close the about:preferences page. Any changes you've made will automatically be saved.

Custom Font Color

Some websites have custom font colors, to disable them:

1. Click the menu button and choose Options > Preferences.
2. Select the ContentGeneral panel.
3. Under Fonts & Colors, click the Colors… button.
4. In the window that opens, set Override the colors specified by the page with my selections above to Always.
5. Click OK to close the Colors window.
6. Close the about:preferences page. Any changes you've made will automatically be saved.

Other settings for Colors

Text and Background: Here you can change the default text and background color to be used on web pages that haven't specified that information. Click on the color samples to select colors.

• Use system colors: Check this optionpreference to use the colors defined in your operating system settings instead of the colors specified above.

Link Colors: Here you can change the default colors for Web links. Click on the color samples to select colors.

• Underline links: By default, links are underlined on web pages. Uncheck this optionpreference to disable this. Note that many sites specify their own styling rules and this optionpreference has no effect on those sites.

• Override the colors specified by the page with your selections above:

  • Always: Select this optionpreference to force all sites to use your default colors.
  • Only with High Contrast themes: This optionpreference will make Firefox use the colors specified by the web page author, except when you are using a High Contrast WindowsLinux theme.
  • Never: Select this optionpreference to make Firefox use the colors specified by the web page author.

Note: If you later want to restore the default colors:

1. In the address bar, type about:config and press Enter Return.

   • The about:config "This might void your warranty!" warning page may appear. Click I'll be careful, I promise!I accept the risk! to continue to the about:config page.

2. Enter browser*color in the Search field.

3. Right-click Hold down the Ctrl key while you click on the user setmodified preferences.
4. Select Reset.