How to Install a userChrome.css Theme from FirefoxCSS-Store

Updated

FirefoxCSS-Store is a community hub that lists userChrome.css themes for Firefox, and installing one takes about five minutes: enable the legacy stylesheet setting, download the theme's CSS, drop it into a chrome folder inside your Firefox profile, and restart. This works on standard desktop Firefox; it does not apply to Firefox for Android or iOS, and themes that ship JavaScript components need extra setup beyond the CSS steps below.

Before you start

  • Desktop Firefox only. userChrome.css modifies the browser's own interface, which mobile Firefox does not expose.
  • Know your profile folder. Everything you copy goes into a folder named chrome inside your active profile directory.
  • Check what the theme includes. Some store listings are pure CSS; others (for example, themes built on larger projects) may also require JavaScript or companion files. Read the theme's own page or repository before installing.
  • Expect breakage after Firefox updates. userChrome.css hooks into internal UI elements that Mozilla changes between versions, so a theme can stop working or look wrong after an update.

Step 1: Enable userChrome.css support

Firefox ignores userChrome.css unless you turn on a hidden preference.

  1. Type about:config in the address bar and accept the warning.
  2. Search for toolkit.legacyUserProfileCustomizations.stylesheets.
  3. Set it to true.

If the preference does not exist, create it as a Boolean with that exact name. Without this step, your CSS file will load but have no effect.

Step 2: Find your profile folder

  1. Open about:support.
  2. Find the Profile Folder row and click the button to open it (on some systems it is labeled "Open Folder" or "Show in Finder").

You should land in a folder containing files like prefs.js and a chrome subfolder (the chrome folder may not exist yet — that is normal).

Step 3: Create the chrome folder and add the CSS

  1. Inside the profile folder, create a folder named exactly chrome if it is not already there.
  2. Download the theme from FirefoxCSS-Store. Most listings link to a repository or a direct CSS file.
  3. Place the theme's CSS in the chrome folder. The file Firefox reads is named userChrome.css. If the theme provides a differently named file, rename it to userChrome.css, or create a userChrome.css that imports it, for example:
@import url("theme-name.css");

Keep any images, fonts, or extra files the theme references in the same chrome folder or in the subfolders the theme's instructions specify, so relative paths resolve.

Step 4: Restart and verify

  1. Fully quit Firefox (not just close the window) and reopen it.
  2. The interface should now reflect the theme.

If nothing changed, check these in order:

  • The preference from Step 1 is still true.
  • The file is named userChrome.css and sits directly in the chrome folder, not in a nested subfolder.
  • You edited the profile that is actually in use — if you have multiple profiles, confirm the one from about:support.
  • The theme is compatible with your Firefox version; check its repository for recent updates or issues.

Choosing a theme

The store lists 128 themes across 258 tags, sortable by latest shared, recently updated, most starred, or name. Tags describe both look and function, so they are the fastest way to narrow down:

What you want Useful tags to filter by
A specific visual style glassmorphic, minimal, neon, catppuccin, gruvbox, translucent
Layout changes vertical-tabs, sidebar, one-line, tabs, compact
Platform look macos, windows11, gnome, material
Lightweight changes layout-only, theme, colorscheme

Prefer themes marked as recently updated or with many stars on their repository — they are more likely to still work with current Firefox. Themes tagged layout-only or theme tend to be lower-risk than ones bundling javascript or js, which need additional configuration and can break more easily.

Common pitfalls

  • Editing the wrong profile. Firefox can have several profiles; only the active one matters.
  • Wrong filename or location. userChrome.css must be inside chrome/, and the name is case-sensitive on Linux.
  • Missing dependencies. Themes that rely on external files, fonts, or scripts will look broken if those are not installed as the theme's instructions describe.
  • Assuming it is permanent. A Firefox update can change the elements a theme targets, so keep a backup of your chrome folder and be ready to re-check the theme's repository after major updates.