firefoxcss-store.github.io

userChrome.css is a stylesheet file that Firefox loads at startup to restyle its own interface — the toolbars, tabs, address bar, menus, sidebars, and window chrome. It is not a normal website stylesheet: it only works when placed in a specific profile folder and when a Firefox setting (toolkit.legacyUserProfileCustomizations.stylesheets) is enabled. Through it, and through community hubs like FirefoxCSS-Store, you can make Firefox transparent, move tabs to the side, shrink the toolbar, or rebuild the layout entirely — without touching Firefox's source code.

How Firefox applies userChrome.css

Firefox's interface is built with XUL and styled with CSS internally. The userChrome.css file is loaded after the browser's built-in styles, so rules you write can override defaults.

The mechanism is straightforward:

1. Firefox looks for a chrome folder inside your active profile directory.
2. If userChrome.css exists there and the legacy stylesheet preference is enabled, Firefox parses it at startup.
3. Your selectors target internal UI elements (for example #nav-bar, #TabsToolbar, #urlbar) and your declarations override the shipped styling.

Because the file is read at startup, changes require a restart to take effect. There is no live reload built in.

The preference that enables it

Since Firefox 69, userChrome.css is ignored unless you set toolkit.legacyUserProfileCustomizations.stylesheets to true in about:config. Without this, the file is simply not loaded — a common reason a theme appears to do nothing.

What you can actually change

The FirefoxCSS-Store community hub lists 128 themes across 258 tags, with 43,611 stars across theme repositories. That tag vocabulary is a useful map of what userChrome.css can do. Recurring categories include:

Named themes in the store illustrate the range: Firefox-Σigma, LIQUID GLASS, LUXE, Fully Transparent Theme, and Classic Theme 2011. Some, like Pro-Fox, are hosted in their own GitHub repositories and linked from the store rather than living inside it.

A theme is usually a folder containing userChrome.css plus supporting files — images, fonts, or additional stylesheets — and often a user.js or about:config snippet for required preferences.

userChrome.css vs. userContent.css

These two files are often mentioned together but affect different things:

• userChrome.css styles Firefox's own interface — the browser chrome. Tabs, toolbars, menus, the address bar, sidebars.
• userContent.css styles web content — the pages you visit. It can restyle internal pages like about:newtab and about:config, and apply CSS to websites.

They live in the same chrome folder and are enabled by the same preference, but a rule written for one will not affect the other. A theme that changes the look of the new tab page is typically using userContent.css; a theme that makes the toolbar transparent is using userChrome.css.

Limitations and compatibility

userChrome.css is powerful but fragile, and it is worth understanding why before investing time in a theme.

It depends on internal selectors. Firefox's UI markup is not a public API. When Mozilla refactors the browser chrome, IDs and class names can change, and a theme that worked in one version may break in the next. Themes tagged with version numbers (v89, v91) reflect this — they were written against a specific era of Firefox.

It is unsupported. Mozilla does not guarantee that userChrome.css will keep working, and the legacy preference exists specifically to gate this kind of customization. There is no official support channel for a broken theme.

It cannot change everything. Some behaviors are controlled by JavaScript in privileged browser code, not CSS. Themes that need real behavior changes — like a fully reimplemented tab system — often ship a companion extension (Sidebery and Tree Style Tab appear frequently in the store's tags) or a user.js file.

Performance is usually fine. CSS-only changes are cheap. Heavy use of blur, transparency, and large background images can cost some rendering performance, particularly on lower-end hardware.

Choosing a theme that will last

Because breakage is version-dependent, the practical signals are:

• Recently updated — the store sorts by "Recently updated" and "Latest shared," which surfaces themes still being maintained.
• Star count — the store tracks stars across theme repositories, so a well-starred theme is more likely to have an active maintainer and issue reports when Firefox changes.
• Scope — a theme that only tweaks colors and spacing is less likely to break than one that restructures the tab strip.
• A linked repository — themes hosted on GitHub (like Pro-Fox) give you a place to check recent commits and open issues before installing.

Where FirefoxCSS-Store fits

FirefoxCSS-Store is a discovery layer, not a runtime. It indexes community themes, tags them, and links to their sources. You browse or search by tag, open a theme's page, and follow its installation instructions — which typically means downloading the files, placing them in your profile's chrome folder, and setting the legacy stylesheet preference.

If you want to understand what userChrome.css can do before writing any yourself, browsing the store's tag list is a faster survey than reading documentation: it shows the actual range of what people have built, from a single tweak to a complete interface replacement.

FirefoxCSS-Store is a community hub for discovering and sharing Firefox userChrome.css themes. To find the right one, start with the site's search box or tag list, then narrow results with the sort options (Latest shared, Recently updated, Most starred) and check each theme's tags and repository before installing. The catalog currently lists 128 themes and 258 tags, so a few filters will get you to a shortlist faster than scrolling.

Start With the Sort Options

The store offers three sorts, and each answers a different question:

"Most starred" reflects stars across theme repositories, not votes on the store itself — treat it as a rough popularity indicator rather than a quality score.

Filter by Tags Instead of Guessing

Tags are the fastest way to match a theme to your setup. The catalog includes tags for visual style, layout, and platform, including:

• Appearance: dark, light, minimal, glassmorphic, translucent, transparent, neon, pastel, monochrome, skeuomorphic
• Layout: vertical-tabs, sidebar, one-line, compact, tabs, toolbars on bottom, tree style tab
• Platform or environment: linux, macos, windows, windows11, gnome, i3, sway
• Inspiration: arc, opera gx, safari, chrome, material-design, catppuccin, gruvbox, nord

Combine two or three tags to describe what you actually want. For example, dark + minimal + vertical-tabs narrows the list far more than any single tag. If you use a tiling window manager, adding i3 or sway filters out themes built around a floating desktop.

Read the Theme Page Before You Commit

Once you have a shortlist, open each theme's page and check:

1. Preview images — confirm the layout matches what you expect from the tags.
2. Description — look for stated Firefox version requirements or dependencies.
3. Repository link — most themes link to a GitHub repo (for example, Pro-Fox links to github.com/xmansyx/Pro-Fox), where you can check the last commit date and open issues.
4. Compatibility notes — themes that rely on JavaScript or specific Firefox builds may behave differently on your version.

A theme with many stars but no commits in over a year is a different risk than one with fewer stars and recent activity. If the store page doesn't state a Firefox version, the repository's README or issue tracker usually does.

A Practical Shortlist Workflow

1. Pick your primary constraint first — usually layout (vertical-tabs, one-line) or platform (windows11, macos).
2. Add one appearance tag (dark, minimal, transparent).
3. Sort by Recently updated if you run a current Firefox release, or Most starred if you want a widely used starting point.
4. Open the top three or four results and compare their repositories for recent activity and open issues.
5. Install one, test it, and keep the others bookmarked as fallbacks.

Common Pitfalls

• Tag overlap is loose. A theme tagged minimal may still include animations or a custom toolbar layout. Check the preview.
• "Transparent" themes depend on your compositor. On Linux, transparency often requires a compositor that supports blur; on Windows it may need Mica or acrylic settings.
• Star counts are cumulative. A theme with 40,000 stars across a popular repo isn't necessarily better maintained than a smaller one updated last week.
• Version drift. Firefox changes its internal UI markup between releases, so a theme that worked on one version can break after an update. Prefer themes with recent commits if you update Firefox regularly.

If nothing on the shortlist fits, broaden by removing your appearance tag and keeping only the layout or platform tag — layout compatibility matters more than color, since colors are usually easier to adjust yourself.

FirefoxCSS-Store is a community hub that aggregates userChrome.css themes, and its homepage includes a Submit a theme entry point alongside the theme gallery. The site itself does not publish a detailed submission checklist in the available page content, so the practical path is: prepare a public repository or hosted CSS file for your theme, then use the site's submission option to share it with the community. If your theme is already on GitHub, that is the most natural format, since the store's listings link out to theme repositories (for example, the Pro-Fox theme links to its GitHub repository).

What the Store Expects From a Theme

The homepage shows the scale and shape of the collection: 128 themes, 258 tags, and 43,611 stars across theme repos. That tells you what a successful submission looks like in practice — a theme that can be described with a name, a set of tags, and a link to a repository where the CSS lives.

Step-by-Step: Preparing and Submitting

1. Package your theme in a public place

Put your userChrome.css (and any supporting files such as userContent.css, images, or a chrome/ folder structure) in a public repository. GitHub is the common choice because the store's existing listings link to GitHub repos. Include a README that states:

• What the theme does and which Firefox versions it targets
• Installation steps (where to place the chrome folder, the toolkit.legacyUserProfileCustomizations.stylesheets preference)
• Any dependencies, like the Sidebery or Tree Style Tab extensions for sidebar-based themes

2. Choose accurate tags

The store's tag list is the search surface users actually browse. Pick tags that already exist where they fit — dark, minimal, transparent, vertical-tabs, one-line, glassmorphic, rounded, compact — rather than inventing near-duplicates. A theme tagged minimal and dark is findable; one tagged mycooldarkmode is not.

3. Use the "Submit a theme" option

On the homepage, next to the search and sort controls, there is a Submit a theme link. That is the intended entry point for adding your work. Follow whatever form or instructions it presents, supplying your theme name, description, tags, and the repository URL.

4. Expect a community listing, not an instant publish

The store describes itself as a community hub for discovering and sharing themes, and the gallery is sorted by "Latest shared", "Recently updated", and "Most starred". That sorting implies submissions are collected and surfaced as listings rather than being a live self-publish feed. The available page content does not specify a review process, so treat the timing and any editorial checks as unspecified rather than guaranteed.

Common Pitfalls

• Broken install instructions. If your README omits the about:config preference or the profile-folder path, users will install the CSS and see nothing change.
• Missing source link. A theme with no public repo cannot be verified or updated, and the store's own listings consistently link to repositories.
• Tag mismatch. Tagging a light theme dark or a layout-only theme colorscheme makes it show up in the wrong searches.
• No version notes. Firefox's UI changes between releases; state which versions you tested so users know whether a broken layout is your theme or their browser.

Quick Checklist Before Submitting

• [ ] userChrome.css in a public repo with a README
• [ ] Installation steps including the toolkit.legacyUserProfileCustomizations.stylesheets preference
• [ ] A short name and 1–2 sentence description
• [ ] 3–8 tags drawn from the store's existing vocabulary
• [ ] Tested on a stated Firefox version
• [ ] Submission made through the homepage's Submit a theme link

FirefoxCSS-Store is a community hub for discovering and sharing Firefox userChrome.css themes. It collects themes contributed by the Firefox community in one browsable place, so you can find a look you like and then install it yourself. It's useful if you already know you want to customize Firefox's interface and don't want to hunt through scattered GitHub repositories and forum posts.

What you'll find there

The site presents a catalog of themes rather than a single product. Its own description reports:

• 128 themes in the collection
• 258 tags used to categorize them
• 43,611 stars across the theme repositories it links to

Each theme entry points to the theme's source repository, where the actual CSS files and installation instructions live. FirefoxCSS-Store is the discovery layer; the repositories are where the code is maintained.

How the catalog is organized

Themes are tagged with descriptive keywords so you can filter by style or feature. Tags in the catalog include things like:

• Visual style — glassmorphic, minimal, neon, retro, skeuomorphic, brutalist, catppuccin, gruvbox, dracula
• Layout behavior — vertical-tabs, sidebar, one-line, compact, auto-hide, tabs on bottom
• Platform cues — macos, windows11, gnome, opera, arc
• Technical scope — userchrome, javascript, layout-only, theme

Named themes in the catalog include Firefox-Σigma, LIQUID GLASS, LUXE, Fully Transparent Theme, and Classic Theme 2011, among others.

Sorting and search

You can search the catalog and sort results by:

• Latest shared — newest additions to the store
• Recently updated — themes with recent changes
• Most starred — ranked by stars on the linked repositories
• Name — alphabetical

Sorting by "most starred" is a reasonable starting point if you want a theme with an active audience, while "recently updated" helps if you're on a current Firefox version and want something more likely to still work.

Submitting a theme

The store includes a Submit a theme option, so if you've built or found a userChrome.css theme worth sharing, you can add it to the catalog. This is what makes it a community hub rather than a fixed list.

What to keep in mind

FirefoxCSS-Store is a directory, not an installer. To actually use a theme you'll need to:

1. Open the theme's entry and follow its link to the source repository.
2. Read that repository's installation instructions — they vary by theme.
3. Enable the required Firefox customization settings yourself, since userChrome.css themes generally need a specific config flag turned on.

Because themes depend on Firefox's internal UI structure, a theme that hasn't been updated in a long time may break after a Firefox release. Check the "recently updated" sort and the repository's recent activity before committing to one.

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:

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.