Styling Firefox UI

Stylus cannot style Firefox UI

Mozilla has opted to not create an API allowing Web-Extensions 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. Same for the built-in pages like about:addons.

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

• Theming API, more, more links to come...

Current Workarounds

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

1. userChrome.css.

   • This is a file found 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. To use it, make the file (if it doesn't exist) and then start targeting elements of the Firefox UI. More information on how to do so can be found both here, and here.

2. reStyle, (source).

   • This extensions connects to a server (that you also have to install) that then automatically writes 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 and how you can use it is available here.