Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox userChrome meta tag

  • 8 replies
  • 0 have this problem
  • 3 views
  • Last reply by cor-el

more options

Is it possible to edit the userChrome.css file to have the tab/tool bar change colors like in Safari 15? I am new to CSS but would love to know if this is possible.

Is it possible to edit the userChrome.css file to have the tab/tool bar change colors like in Safari 15? I am new to CSS but would love to know if this is possible.

All Replies (8)

more options

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.

more options

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.

more options
more options

How does this feature work in Safari ? Can you attach a 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.

more options

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.

more options

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.

more options

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:

more options

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
)

Modified by cor-el