Firefox User CSS

If there are sites you frequent that you'd like to customize, you can actually apply your own CSS rules thanks to a semi-hidden feature in Firefox. I'll describe how I used it to change the colors and style of the Merveilles Forum (just for me). By the way, this was written when Firefox was at version 132.0.1. If you're reading this years later, the instructions below may not work the same.

Find the magic folder

Go to "Help" in the top menu and pick "More Troubleshooting Information" which brings up a page of info including "Profile Folder" which has a button with text something like "Show in Finder" (on mac). Even if the button is not there for you, the path to the folder will also work because the next step is simply to open that folder.

For me that folder was similar to /Users/td/Library/Application Support/Firefox/Profiles/3ps5vj5n.default-1555334331311, so now hopefully you've got that folder open.

The "chrome" sub-folder

If you don't already have a sub-folder in there named "chrome", go ahead and add it.

The CSS

Now create a file named "userContent.css" and place it in the chrome folder. This file is where you'll put all your customizations.

Enable the feature

Go to "about:config" in the URL bar which brings up a special interface. In the config search input, type toolkit.legacyUserProfileCustomizations.stylesheets and set that value to true - there's a toggle button on the right to change it.

Restart Firefox

Restart Firefox, and get used to restarting it because you'll need to restart after each change you save to userContent.css.

The CSS code

The CSS code works, for the most part, like CSS on any site. To ensure your rules only apply on a specific site, wrap all your CSS in @-moz-document domain('the-domain-goes.here'){, see my example code below.

Although !important" is something you should avoid in normal CSS - in this context it's ok to do, and often necessary.

Example Code

@-moz-document domain('forum.merveilles.town'){
	body {
		background:#202020!important;
		color:#eee!important;
		font-size: 15px!important;
	}
	h1, h1 a,
	h2, h2 a, h2 a:not([class]),
	span > b,
	button,
	pre code {
	  font-size: 15px!important;
	  font-weight: normal!important;
	  color:#ddd!important;
	}
	a:visited, h2 a:visited {color:#aaa!important;}
	header a, 
	header a:visited,
	a:not([class]) {color:#8EDBC3!important;}
	header img {filter: invert(1);}
}

Note that I was able to reverse the logo image using filter: invert(1), which might be handy for other cases where you're reversing color schemes or creating some kind of dark-mode.

Inspect with your custom CSS too

If you want to see and debug your CSS alongside the site's css in the web inspector, open the inspector, click the 3 dot menu and pick "Settings", then look for the checkbox labeled "Show Browser Styles".