Background colors change.

User Help for Mozilla Firefox
Locked
Butch76
Posts: 2
Joined: September 29th, 2021, 7:45 am
Location: Near former NAS Millington TN (KCQA)

Background colors change.

Post by Butch76 »

I am using FF V92 64 bit and want to know if the dark and teal colors can be changed or are they baked in?

Image


Image
User avatar
LIMPET235
Moderator
Posts: 39920
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Re: Background colors change.

Post by LIMPET235 »

Moving to Firefox Support...

&...
To post images here..
After you've taken the screen shot/s...
Reduce it/them to around 600 x 500 or so in your favourite image editor, (Be sure to remove any personal info.)
& upload them to your favourite image hosting site.
> https://imgur.com/
> https://imgbox.com/
> http://www.imagebam.com/
> http://postimages.org/

eg;...Using "postimages.org",
0/. Upload your image.
1/. Select > from the "Do not resize" drop down, 640 x 480.
2/. No expiration. (Leave as default or as you require.
3/. Choose > Images to upload.
3a/. After the image/s have been uploaded.
4/. Select > Hot Link for Forum.
5/. Paste that link in your forum thread.
6/. Your image will be displayed in your post.
[Ancient Amateur Astronomer.]
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.

(Always choose the "Custom" Install.)
morat
Posts: 6394
Joined: February 3rd, 2009, 6:29 pm

Re: Background colors change.

Post by morat »

Try something like:

Code: Select all

/* Firefox userContent.css */

:root {
  --in-content-accent-color: red !important;
  --in-content-primary-button-background: lime !important;
}
userContent.css
http://web.archive.org/web/202102172114 ... ontent.css

Reference
http://searchfox.org/mozilla-release/so ... on.inc.css

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.

Similar thread
http://old.reddit.com/r/firefox/comments/ntd2oh
Last edited by morat on September 29th, 2021, 3:56 pm, edited 1 time in total.
User avatar
jscher2000
Posts: 11734
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Background colors change.

Post by jscher2000 »

As a footnote, to style the Settings page, morat is correct that these rules go into a userContent.css file (and not a userChrome.css file, which is the file that failed to work in the Reddit thread).
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

Re: Background colors change.

Post by limp »

morat's

:root {
--in-content-accent-color: red !important;
}

succeeds in removing that horrible cyan/tea/garbage--whatever you want to call it--color from two items
which heretofore have defied all my attempts to change their color using "official" CSS:

A category in the "selected" state in Add-ons Manager;
The check marks in the search shortcuts list in Settings > Search.

However, that awful color remains invulnerable to change in the following "about:" pages:

Remote Debugging(about:debugging);
Protections Dashboard (about:protections);
Saved Logins (about:logins);
Studies (about:studies).
Butch76
Posts: 2
Joined: September 29th, 2021, 7:45 am
Location: Near former NAS Millington TN (KCQA)

Re: Background colors change.

Post by Butch76 »

Thanks for all the support, actually, I was looking for a way to change the teal color for the following popups in FF

Image

and

Image
limp
Posts: 215
Joined: September 3rd, 2008, 4:26 pm

Re: Background colors change.

Post by limp »

It depends on what type of dialog it is and where it appears. Use Browser Toolbox to get its ID or class name,
and enter your code in userChrome or userContent, whichever is appropriate for a given dialog. Basically, the idea is this:

Code: Select all

/* Dialog buttons */

   .dialog-button-box button[dlgtype="accept"]
     { background-color: #0084c0 !important;
       color: #eee !important; }

   .dialog-button-box button[dlgtype="accept"]:hover
     { background-color: #00a2ed !important;
       font-weight: bold !important; }

   .dialog-button-box button[dlgtype="cancel"]
     { border: 1px solid #666 !important;
       background-color: #2b2a33 !important;
       color: #eee !important; }

   .dialog-button-box button[dlgtype="cancel"]:hover
     { background-color: #5b5a66 !important;
       font-weight: bold !important; }
...and for check boxes, like this:

Code: Select all

/* Check boxes */

   popupnotification
   checkbox:not([checked="true"]) image
     { background-color: #111 !important; }

   popupnotification
   checkbox:not([checked="true"]):hover image
     { background-color: #0084c0 !important; }

   popupnotification checkbox[checked="true"] image
     { background-color: #0084c0 !important;
       fill: #eee !important; }

   popupnotification checkbox[checked="true"]:hover image
     { background-color: #00a2ed !important; }
Locked