Change Color of Star Bookmark Button in Firefox

Under Firefox 57+ Quantum the Star Bookmark button you see in the URL bar has a default color which appears to be inherited from the system/somewhere? This color is used in other places like the download icon. I find this very annoying as I use this to check if something is finished downloading and the default blue color of star-button throws me off often.

You can modify the color using userChrome.css, here are the quick steps to do it.

For Windows go to C:\Users\YOURUSERNAME\AppData\Roaming\Mozilla\Firefox\Profiles\YOURPROFILE.default\chrome\ (you can type %appdata% to get part way there).

Create a userChrome.css file if you don't have one, and edit it in a text editor, add the following, save and restart Firefox.

#star-button[starred] {
  fill: orange !important;
}

You can change the color to something else by modifying the fill: orange part, or use #hexcode or rgb(0, 0, 0)

Should be like this now:

When you click the button the page bookmarked big star icon is still a different color however, I'm not sure what controls it, make a comment if you find the element that does.

For further editing open chrome://browser/skin/browser.css in firefox if you want to mess around some more, and apply any changes to your custom userChrome.css

Also check this site out for a few different changes, like making bookmark folder different colors: https://www.userchrome.org/what-is-userchrome-css.html