DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Firefox userChrome.css: Customizing the Browser UI with CSS

#firefox #css #webdev #linux

Firefox can be customized far beyond what the Settings page exposes. userChrome.css lets you modify the browser's own UI — tabs, toolbar, sidebar, menus — with custom CSS.

Enabling userChrome.css

Firefox doesn't load userChrome.css by default. You need to enable it:

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

Now Firefox will load CSS from your profile's chrome/ folder.

Finding Your Profile Folder

  1. Go to about:support
  2. Look for "Profile Directory" → click "Open Directory"
  3. Inside, create a folder called chrome
  4. Inside chrome, create a file called userChrome.css

Structure 

/* userChrome.css */

/* Target the browser UI elements here */
#TabsToolbar { ... }
#sidebar-box { ... }
toolbarbutton { ... }
Enter fullscreen mode Exit fullscreen mode

Changes take effect after restarting Firefox.

Useful Recipes

Hide the Tab Bar (when using vertical tabs or Tree Style Tab)

If you use the vertical tab sidebar (Firefox 131+) or an extension like Tree Style Tab, you can hide the horizontal tab bar:

#TabsToolbar {
  visibility: collapse !important;
}
Enter fullscreen mode Exit fullscreen mode

Compact Mode (smaller toolbar and tabs)

Firefox removed compact density mode from the UI in version 89, but you can restore it:

:root:-moz-lwtheme {
  --tab-min-height: 26px !important;
}

#nav-bar {
  --toolbarbutton-outer-padding: 1px !important;
}

#urlbar {
  --urlbar-height: 28px !important;
  --urlbar-toolbar-height: 32px !important;
}
Enter fullscreen mode Exit fullscreen mode

Change Tab Font Size 

.tab-label {
  font-size: 12px !important;
}
Enter fullscreen mode Exit fullscreen mode

Move the Tab Bar Below the Navigation Bar 

#navigator-toolbox {
  flex-direction: column;
}

#TabsToolbar {
  order: 2;
}

#nav-bar {
  order: 1;
}
Enter fullscreen mode Exit fullscreen mode

Hide the Close Button on Inactive Tabs 

.tabbrowser-tab:not([selected]) .tab-close-button {
  display: none !important;
}
Enter fullscreen mode Exit fullscreen mode

Colorize Pinned Tabs 

.tabbrowser-tab[pinned] .tab-background {
  background-color: rgba(0, 128, 255, 0.2) !important;
}
Enter fullscreen mode Exit fullscreen mode

Auto-Hide the Sidebar 

#sidebar-box {
  min-width: 0px !important;
  width: 18px !important;
  overflow: hidden !important;
  transition: width 0.3s ease !important;
}

#sidebar-box:hover {
  width: 250px !important;
}
Enter fullscreen mode Exit fullscreen mode

userContent.css

Similar to userChrome.css, userContent.css in the same chrome/ folder lets you add CSS to web pages globally.

Example — add a dark background to all pages that use system color schemes:

@media (prefers-color-scheme: dark) {
  :root {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }
}
Enter fullscreen mode Exit fullscreen mode

Note: this applies to ALL pages. Be careful with blanket rules.

Where to Find More Recipes

  • FirefoxCSS Subreddit (r/FirefoxCSS) — Active community sharing userChrome snippets
  • FirefoxCSS Store (firefoxcss.github.io) — Gallery of complete userChrome themes
  • Mozilla Wiki: UserChrome — Official documentation for available CSS selectors

Updating After Firefox Updates

Firefox's internal UI can change between major versions, which means userChrome.css rules can break. When Firefox updates and your customizations stop working:

  1. Open the Browser Toolbox (about:debugging → This Firefox → Browser Toolbox, or Ctrl+Shift+Alt+I)
  2. Use the inspector to find the updated element selectors
  3. Update your CSS

Firefox's major UI changes happen roughly every few versions — usually just minor selector changes.

For Sessions: Complement, Not Replace

userChrome.css modifies the visual UI — it won't help you manage actual tab content or session state. For saving and restoring named tab sessions (especially useful if you're experimenting with a heavily customized UI and want to restore specific work contexts), Tab Manager & Session Saver handles that at the extension level.

userChrome.css is one of the most underused Firefox features. The combination of compact mode, hidden tab bar for vertical tabs, and an auto-hiding sidebar gives you a significantly more productive workspace without any external tooling.

Top comments (0)