userChrome.css lets you customize Firefox's UI with CSS — changing tab appearance, toolbar layout, sidebar styling, and more. It's a powerful customization tool that survives Firefox updates (mostly).

Enabling userChrome.css

First, enable the legacy CSS customization:

  1. Go to about:config
  2. Search for toolkit.legacyUserProfileCustomizations.stylesheets
  3. Set it to true

Then create the file:

  1. Go to about:support → Profile Folder → Open Folder
  2. Create a folder named chrome inside the profile folder
  3. Create a file userChrome.css inside the chrome folder
  4. Restart Firefox

Now you can add CSS to userChrome.css.

Testing Changes

Changes to userChrome.css require a Firefox restart to take effect.

For faster iteration: Use the Browser Toolbox (about:debugging → This Firefox → Browser Toolbox). This opens DevTools connected to the browser UI itself, letting you inspect and modify the toolbar in real-time.

Access Browser Toolbox:

  1. about:config → devtools.chrome.enabled = true
  2. about:config → devtools.debugger.remote-enabled = true
  3. DevTools → three-dot → Browser Toolbox → Allow

Hiding the Tab Bar

If you use a vertical tab extension (Sidebery, Tree Style Tab), you want to hide the horizontal tab bar:

#TabsToolbar { visibility: collapse !important; }

Or with animation for a smoother feel:

#TabsToolbar { height: 0 !important; min-height: 0 !important; }

Compact Tab Mode

Make tabs smaller:

/* Compact tab height */ :root { --tab-min-height: 24px !important; } #tabbrowser-tabs { --tab-min-height: 24px !important; }

Auto-Hide Bookmarks Bar

Show the bookmarks bar only on hover:

#PersonalToolbar { transition: height 0.3s ease; height: 0 !important; overflow: hidden !important; } #nav-bar:hover ~ #PersonalToolbar, #PersonalToolbar:hover { height: var(--bookmark-toolbar-height) !important; overflow: visible !important; }

Note: The exact CSS can change between Firefox versions. If this stops working after an update, use the Browser Toolbox to re-identify the selectors.

Compact Mode (Pre-Firefox 89)

Firefox 89 removed Compact mode from the UI. You can re-enable it:

/* Compact mode */ :root { --toolbarbutton-inner-padding: 4px !important; --toolbar-button-margin: 0px !important; }

Or via about:config:
browser.compactmode.show = true → then Settings → General → Density → Compact

Sidebar Adjustments

Make the sidebar wider/narrower by default:

#sidebar-box { min-width: 250px; max-width: 400px; width: 250px !important; }

Styling Pinned Tabs 

/* Make pinned tabs with specific styling */ .tabbrowser-tab[pinned] { background-color: rgba(0, 128, 255, 0.2) !important; } /* Make active pinned tab more visible */ .tabbrowser-tab[pinned][selected] { background-color: rgba(0, 128, 255, 0.5) !important; }

Center the Address Bar Content

Some people prefer a centered address bar (like Arc or other opinionated browsers):

/* Center address bar items */ #urlbar-input-container { text-align: center !important; }

Remove Specific UI Elements 

/* Hide the "Pocket" save button */ #save-to-pocket-button { display: none !important; } /* Hide Firefox logo in about:home (save space) */ .logo-and-wordmark { display: none !important; } /* Hide "New tab" button */ #tabs-newtab-button { display: none !important; } /* Hide the "Firefox Sync" icon */ #sync-button { display: none !important; } /* Hide notifications button */ #appMenu-notification-popup { display: none !important; }

Adding Container Color Indicators

Make container (Multi-Account Containers) tab colors more prominent:

/* Thicker container color indicator on tabs */ .tabbrowser-tab[usercontextid] .tab-context-line { height: 4px !important; } /* Show container color in tab background */ .tabbrowser-tab[usercontextid="1"] { background-color: rgba(var(--identity-color-blue), 0.15) !important; }

Window Buttons Styling 

/* Remove window control buttons (if using a custom WM on Linux) */ .titlebar-buttonbox-container { display: none !important; }

Dark Mode UI Beyond the Theme

If Firefox's built-in dark mode looks wrong on your system:

/* Force specific UI elements to dark */ #nav-bar { background-color: #1a1a2e !important; color: #e0e0e0 !important; } #urlbar-background { background-color: #16213e !important; }

userContent.css (for Web Pages)

userContent.css applies CSS to all web pages. Create it in the same chrome/ directory.

Example: Set a minimum font size on all pages:

@namespace url(http://www.w3.org/1999/xhtml); body { font-size: max(14px, 1em) !important; }

Example: Force dark background on all pages (rough approximation):

@namespace url(http://www.w3.org/1999/xhtml); @media (prefers-color-scheme: dark) { html:not(.dark) { filter: invert(1) hue-rotate(180deg) !important; } img, video, canvas { filter: invert(1) hue-rotate(180deg) !important; } }

This is a rough CSS-only dark mode. For better dark mode: use NightOwl or Dark Reader extension.

Maintenance Across Updates

userChrome.css can break when Firefox updates its internal component IDs.

How to fix: Open the Browser Toolbox → inspect the element that lost its styling → find the new selector → update userChrome.css.

Resources for maintained userChrome snippets:

  • r/FirefoxCSS on Reddit has a community maintaining working snippets
  • GitHub searches for userChrome.css find many maintained configurations
  • Firefox's browser.xhtml source shows the internal element IDs

The more specific your CSS selector, the more likely it breaks. Use general ID-based selectors over complex nested selectors.