What is firefox-ui-fix?

black7375/firefox-ui-fix — explained in plain English

Analysis updated 2026-06-26

★ 5,807SCSSAudience · generalComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((firefox-ui-fix))
    What it does
      Refines Firefox UI look
      Compact tab and menu spacing
      Alternative tab layouts
    Tech Stack
      CSS and SCSS
      Firefox userChrome
      user.js config file
    Use Cases
      Compact UI density
      Vertical tab sidebar
      Dark mode improvements
    Audience
      Power users
      Firefox customizers
      Designers

mindmap root((firefox-ui-fix)) What it does Refines Firefox UI look Compact tab and menu spacing Alternative tab layouts Tech Stack CSS and SCSS Firefox userChrome user.js config file Use Cases Compact UI density Vertical tab sidebar Dark mode improvements Audience Power users Firefox customizers Designers

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Tighten Firefox's tab bar and menus to show more content on screen with less wasted space.

USE CASE 2

Switch to a vertical tab sidebar or move tabs to the bottom of the browser window.

USE CASE 3

Improve contrast and icon appearance in Firefox's light and dark modes via custom CSS.

What is it built with?

CSSSCSS

How does it compare?

	black7375/firefox-ui-fix	aboutrss/all-about-rss	keldos-li/typora-latex-theme
Stars	5,807	5,805	5,804
Language	SCSS	SCSS	SCSS
Setup difficulty	moderate	easy	easy
Complexity	2/5	1/5	1/5
Audience	general	general	writer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires enabling toolkit.legacyUserProfileCustomizations.stylesheets in Firefox's about:config before the CSS takes effect.

So what is it?

Firefox UI Fix, also called Lepton, is a collection of CSS style adjustments for the Firefox web browser. CSS is the language that controls how things look on screen, and Firefox allows advanced users to apply custom CSS to its own interface, including the tab bar, menus, and panels. This project takes that feature and uses it to refine the look of Firefox's Proton design, which Mozilla introduced in Firefox 89. The changes cover a range of visual details: tighter padding in tabs and menus to make more content visible on screen, improvements to how the selected tab is highlighted, adjustments to icon appearances in the context menu and sidebar panels, better contrast in light and dark modes, and alternative tab bar layouts such as tabs on the bottom or a vertical tab strip along the side. Each feature is optional and controlled through a user.js settings file that you copy into your Firefox profile folder. Installation involves placing two files into the right directory inside your Firefox profile: a userChrome.css file that imports the styles, and a user.js file that sets the configuration options. The README notes that some settings can conflict with each other and that changes require a browser restart because Firefox does not apply CSS changes in real time. The project requires Firefox 89 or later and is written in SCSS, which is a style language that compiles down to plain CSS. The source is on GitHub and includes a wiki with installation guides, screenshots, and a tips section.

Copy-paste prompts

Prompt 1

How do I install the Lepton firefox-ui-fix userChrome.css into my Firefox profile on macOS or Linux?

Prompt 2

Which user.js settings do I need to enable vertical tabs in the Lepton Firefox UI Fix project?

Prompt 3

What firefox-ui-fix options can I combine to get a compact, dark-mode Firefox UI with a vertical tab strip?

Prompt 4

Show me how to enable Firefox's userChrome.css support so that Lepton's styles actually apply after browser restart.

Frequently asked questions