Firefox Photon

Styling Firefox Proton to resemble Firefox Photon.

Originally tested on Firefox 91, confirmed working on Firefox 104.

Firefox Proton

Firefox Photon

Firefox Proton brought many lovely features, but I deeply prefer the Photon tab design. Luckily, Proton supports applying CSS styling to window elements like the tab bar.

  1. Open about:config
  2. Find for toolkit.legacyUserProfileCustomizations.stylesheets, set its value to true.
  3. Open about:support and go to the directory marked "Profile Directory" or "Profile Folder".
  4. Create file <profile directory>/chrome/userChrome.css with custom stylesheet, e.g.
    .tab-background {
        border-radius: 0px 0px !important;
        margin-bottom: 0px !important;
        margin-top: 0px !important;
    }
    
    .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
        background-color: color-mix(in srgb, currentColor 0%, transparent);
    }
    
  5. Restart Firefox