How To Tweak Firefox’s User Interface

(Warning: Modifying userChrome.css is not guaranteed to work between versions of Firefox and may lead to hard-to-diagnose bugs. Use at your own risk!)

Firefox Quantum has made a clean break from Firefox’s legacy addons. Hooray!

A casualty of this change is the ability to have addons that fundamentally alter Firefox’s user interface. This can be a problem if you depended on this for accessibility needs. Say, you had an addon that enlarged the fonts in Firefox’s chrome.

Luckily, not all is lost. With some CSS knowledge, you can customize the Firefox user interface as much as you need. Simply drop some CSS rules into $PROFILE/chrome/userChrome.css.

Here is an example rule that employs large yellow on black text:

* {
  font-size-adjust: 0.75 !important;
  background-color: #000 !important;
  color: yellow !important;
}

The effect on Firefox will be dramatic:

Restylized user interface with yellow on black text

Note, this will break things, and it will not be perfect. Before using this kind of solution check what accessibility features your platform provides.

How To Tweak Firefox’s User Interface