Firefox allows users to apply user stylesheets to modify every single webpage as necessary or even modify the UI of Firefox itself. Custom CSS code should put into userChrome.css (for Firefox UI) & userContent.css (for custom web pages) files inside browsers profile folder.

You can get a template from https://github.com/Aris-t2/CustomCSSforFx to start your customization.

Keep in mind that these CSS code can only modify already presented UI items.

Unlock custom CSS usage in Firefox

about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

This works in Firefox 69+.

Location for user styles

1. Find your profile folder (profile names are different for everyone): about:support > Profile Folder > Open Folder or about:profiles > Root Directory > Open Folder.

2. User styles should put into \chrome folder. Create the folder, if there is none yet.

3. Then work with these two files: \chrome\userChrome.css & \chrome\userContent.css.

Create “userContent.css” file

Firefox adds the userContent.css file on every page, if it exits. So don’t create overly broad CSS selectors which will apply to every website, for example:

/* an overly aggressive style */
body {
    background-color: bisque !important;
}

background color ruined by custom css

It’s much better to narrow the CSS effects only on targeted site with a special CSS @document rule:

@-moz-document domain("example.com") {
  h1 {
    color: green;
  }
}

With these basics, you can now start your stylings. The same process for userChrome.css, but I’m not going to touch it right now…

By the way, restart Firefox to put new changes into effect.