It is possible to change the colors of the table bar and tool bar in Firefox. To do this, first go to the settings (three horizontal lines in the upper right corner), then press Add-ons and Themes (Ctrl+Shift+A), then Firefox sends you to a web page called Add-ons under which you will find Themes, i.e. colors that you can colorize the table bar.

It is certainly possible to change tab colours with userChrome.css. (I have done so.) I don't recall seeing any code to change toolbar colours (except for the address bar and search bar, which aren't actually toolbars) but I believe it is possible.

You could search the css repositories on github or ask on the FirefoxCSS sub of Reddit or the forums on mozillazine. org if you want help with code.

See also https://developer.mozilla.org/en-US/docs/Web/CSS

How does this feature work in Safari ? Can you attach a screenshot?

• https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem
• use a compressed image type like PNG or JPG to save the screenshot

In Firefox you can use a theme to style the entire toolbar area with a background image or background color, no need to use userChrome.css for this.

• https://colors.firefox.com
• https://support.mozilla.org/en-US/kb/use-themes-change-look-of-firefox
• https://support.mozilla.org/en-US/kb/personalize-firefox-colorways

The tab bar in Safari changes color based on the website's meta theme in html (e.g. <meta... />) I want to find out if it is possible to do so ([https://css-tricks.com/meta-theme-col.../meta-theme-color-and-trickery/]) in Firefox using userChrome.css I know I can change themes and colors, but it would be cool to have it website dependent like in Safari.

Have you posted this same question in a userChrome.css mac forum to see what others on the sites mentions as well? Because by default userChrome.css isn't a Firefox default load-that's user customization.

I don't think you can do this with a normal userChrome.css rule. The reason is that rules operate hierarchically: the information needed to style a toolbar needs to be found at the same or a higher level of the HTML code, and the page is not part of the structure.

It looks like people have tried to make add-ons for this. Reviews are mixed: https://addons.mozilla.org/firefox/addon/adaptheme/. This one will try to figure out a good color if the site didn't set the meta tag: https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-color/. I haven't tried any of those myself.

If you can't find a workable add-on, there is a kind of advanced hacking that loads script code during startup. This method has a better chance of being able to work because it doesn't have the same limitation as pure CSS. You could ask on r/FirefoxCSS whether anyone already has a script for this.

More information/references:

• https://www.userchrome.org/what-is-userchrome-js.html
• https://www.reddit.com/r/FirefoxCSS/

See also:

• 1706179 - Add support for <meta media> (for <meta name=theme-color>)

(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html)