Styling Firefox UI

Stylus cannot style Firefox's user interface (UI)

Mozilla has opted to not create an API allowing WebExtensions to control the browser appearance via CSS, which was previously possible. This means targeting any form of @-moz-document url("chrome://browser/content/browser.xul") will not work with Stylus. The same goes for the built-in pages like about:addons.

You can find details and discussions about removal / inclusion of the Theming API in the following links:

• Bugzilla Bug 1330328, Bugzilla Bug 1306671, more links to come...

Current Workarounds

If you absolutely can't deal with not being able to modify how the Firefox UI looks, you have a couple of different options.

1. userChrome.css.

   • This is a file in your Firefox profile that can change the style of the Firefox UI. This is currently the only thing that can change how Firefox looks. More information on how to do so can be found on both userchrome.org, and mozillaZine.

2. reStyle, (source).

   • This extension connects to a server (that you have to install) which automatically saves the userChrome.css. The only thing you have to do with this extension is save the CSS, then restart Firefox to see the changes.

A lot of excellent information regarding userChrome.css, how you can use it, and some ready-to-use scripts are available in the CustomCSSforFx Project.