Hi, I do not have my notes tonight so no long list of sites for you.

About 230 million ways to customize Firefox with userChrome

• https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/

Place to ask questions and get code for usserChrome : https://www.reddit.com/r/firefox/ A extension :

• https://addons.mozilla.org/en-US/firefox/addon/theme-font-size-changer/

At this time those sort of Extensions that modified Firefox Controls are not allowed due to security and stop those things from crashing Firefox. Maybe in the near future as there is a new standard people are writing code for it to make new extensions that are compatible.

Update: It looks like the icons and their animations are svg vector graphics files defining the shapes , located in the source repository at browser/themes/shared/icons, with the css for icons and fill colours probably defined in browser/themes/shared/toolbarbutton-icons.inc.css. It does not seem to work to change them from a userChrome.css file (tried replacing forward.svg with back.svg in #forward-button) . I guess I leave it there. It is not that important, just a minor nuisance.

Update 2: Now it works.... (see picture)

the icon ids are from the toolbarbutton-icons.inc.css file.

The !important flags seem to be important...

Note that fill-opacity is not a color value, but a number between 0 and 1.

• https://dxr.mozilla.org/mozilla-release/source/browser/themes/shared/toolbarbutton-icons.inc.css

You should always use the important flag when you want to override a defined property, but I think that using only the fill property to set the (text) color would be sufficient (why override the forward button with the icon of the back button??)

#back-button {
 fill: #ff3010 ! important;
/*  list-style-image: url("chrome://browser/skin/back.svg"); */
}

#forward-button {
 fill: #ff3010 ! important;
/* list-style-image: url("chrome://browser/skin/forward.svg"); */
}

I did not know exactly what fill-opacity was for, so I just tried to set a different color there to see if there was any effect. Overriding the forward button with the back button was just to find out if I could override the icon there. At the end, I just changed the forward/back buttons to blue, reload to green and stop to red for now, without changing the shapes.