AskVG

[Tip] New Working Method to Restore Classic Theme and UI in Firefox 91 and Later Versions

- Last updated on by

UPDATE: If you are using the new Firefox 103 version and want to enable colorized titlebar in Firefox, following article will help you:

[Tip] Enable Colorized Titlebar Again in Firefox 103 and Later Versions

This article contains a new working method to disable new Proton UI and restore old classic theme and UI in Firefox 91 and later versions.

Advertisement

If you upgraded to new version of Mozilla Firefox web browser such as version 91.0 or later, you might have immediately noticed that old methods or workarounds (about:config) to restore classic theme and UI in Firefox no longer work.

When Mozilla team released Firefox 89 version, it came with a brand new Proton design UI or User Interface (Review). The new Proton theme features round floating tabs which are not connected with the toolbar. Also the titlebar or tab bar became light grey and doesn’t follow the colorization functionality of the operating system (such as Windows 10). The menus, context menus, etc were also redesigned to look clean and refreshing. Mozilla team increased vertical spacing or padding in all menus to make them touch-friendly.

Following screenshot shows new Proton UI present in Firefox 89 and later versions:

New_Proton_Visual_Design_Refresh_Theme_UI_Mozilla_Firefox.png

Many Firefox users didn’t like the new UI changes specially the floating tabs feature (More Info). Initially Mozilla team provided a few hidden preferences/flags to disable new Proton UI and restore previous look-n-feel in Firefox. Advanced users could use those flags to re-enable old UI and look in Firefox. We posted about the method in following article:

[Tip] Restore Old Classic Theme and UI in Firefox 89 and Later Versions

But with the release of Firefox 91 version, Mozilla team has deleted almost all preferences/flags to restore classic UI in Firefox. Only the main “browser.proton.enabled” preference is available to modify which has also become almost useless. It now no longer restores classic UI in Firefox. It just makes the titlebar or tab bar colorized. Mozilla team will also remove this preference in future versions of Firefox. Even if we manually create previous flags in about:config tool, they no longer work. Mozilla team has removed their functionality from Firefox code.

Advertisement

If you don’t like new Proton UI in Firefox and want to get rid of it and bring back classic UI in Firefox 91 and later versions, this tutorial will help you.

In this article, we are going to share a very easy and new working method to disable new Proton UI and restore old classic user interface in Firefox. We’ll take help of CSS stylesheet to modify Firefox Proton UI and make it look-like classic UI.

Following screenshots show the output result which you’ll get after following this tutorial:

Floating Tabs Disabled and Inactive Tabs are Easily Distinguishable:

Disable_Floating_Disconnected_Tabs_Mozilla_Firefox_Proton_UI.png

Compact Tab Context Menu with Reduced Vertical Spacing or Padding:

Restore_Compact_Tab_Context_Menus_Firefox_Reduced_Vertical_Space_Padding.png

Compact Right-Click Menus with Reduced Vertical Spacing or Padding:

Restore_Compact_Right_Click_Menus_Firefox_Reduced_Vertical_Space_Padding.png

Compact Bookmarks Menu with Reduced Vertical Spacing or Padding:

Restore_Compact_Bookmarks_Menus_Firefox_Reduced_Vertical_Space_Padding.png

Compact Main Firefox Menu with Reduced Vertical Spacing or Padding:

Restore_Compact_Main_Firefox_Menu_Reduced_Vertical_Space_Padding.png

(OPTIONAL) Restore Colors in Firefox Title bar:

Disable_New_Proton_UI_Restore_Old_Classic_Theme_UI_Mozilla_Firefox.png

As you can see in the above screenshots, the tabs are now connected to the toolbar and all menus are now compact without any extra unnecessary spacing or padding. You can also force the titlebar to respect operating system colorization functionality.

Following steps will help you in disabling new Proton UI and enabling old classic theme in new versions of Firefox web browser:

STEP 1: Enable CSS Stylesheet Code Support in Firefox

We are going to use a CSS style code to restore classic UI, so we’ll need to first enable support for CSS code in Firefox by modifying a preference/flag using about:config page. Just set toolkit.legacyUserProfileCustomizations.stylesheets preference to true on about:config page to enable support for CSS code.

Restore_UserChrome_UserContent_CSS_Functionality_Mozilla_Firefox.png

Following article contains step-by-step guide for it:

[Fix] userChrome.css and userContent.css Codes Stopped Working After Firefox Upgrade

STEP 2: Put CSS Code in userChrome.css File

Now we’ll apply the required CSS code. We’ll take help of a built-in file userChrome.css to implement our custom-made CSS code. This file doesn’t exist by default and we’ll need to manually create the file and add following code:

PS: If you don’t want to create the CSS file manually, ready-made file is also available for download below the code.

If you want to disable Proton UI changes but don’t want to restore colors in title bar, use following code:

.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
min-height: 0px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}

If you want to disable Proton UI changes and also want to restore colors in title bar, use following code:

PS: Firefox 103 and later version users will need to use AccentColor in place of -moz-accent-color and AccentColorText in place of -moz-accent-color-foreground in following code:

.titlebar-color{
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}
.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
}
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
min-height: 0px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}

TIP: Above mentioned codes are completely customizable. If you want to customize the vertical spacing or padding in menus, you can modify the code according to your requirements. For example, if you find the spacing less, you can change the 2px value to 3px or 4px in the code. Similarly, if you want to reduce the spacing more, you can change the 2px value to 1px. If you want to customize inactive tabs highlighting, you can change the value of “currentColor 5%”. For example, if you want to increase the highlight amount, change 5% to 10%.

For your convenience, we have created ready-made userChrome.css files for both the above mentioned codes. Download following ZIP file, extract it using 7-Zip or other file archive software and you’ll get userChrome.css files:

Download userChrome.css File to Restore Classic Theme and UI in Mozilla Firefox

PS: We have tried to keep the CSS file minimal so that it doesn’t cause any performance issues. We can add more functionality to the CSS file but it’ll increase file size which might cause performance issues in Firefox such as slow startup, etc. That’s why we decided to address the major issues in new Proton UI which are light grey titlebar, floating tabs and extra vertical spacing in menus.

STEP 3: Copy userChrome.css File to Firefox Profile Folder

Now we’ll put the downloaded userChrome.css file inside our Firefox profile folder. You can directly open your Firefox profile folder using following steps:

  • Type about:support in address bar and press Enter. It’ll open Troubleshooting Information page.
  • Now look for “Profile Folder” option. Click on “Open Folder” button.

It’ll open your current Firefox profile folder.

Now create a new folder with the name chrome inside the profile folder. Right-click on empty area and select New-> Folder option. Or you can press Ctrl+Shift+N keys together to directly create a new folder.

Create_Chrome_Folder_Mozilla_Firefox_Profile.png

Set the new folder name as chrome and press Enter key.

PS: Some users may already have chrome folder in their profile folder.

Now copy the downloaded userChrome.css file and paste it inside the newly created chrome folder.

Create_UserChrome_CSS_File_Chrome_Folder_Mozilla_Firefox_Profile.png

PS: If you already have userChrome.css file in chrome folder, you’ll need to copy the text given in downloaded userChrome.css file and paste it at the top of existing userChrome.css file and save the file.

NOTE: Ignore the other userContent.css file shown in above screenshot. It was created for other purpose mentioned in this tutorial.

STEP 4: Restart Firefox to Apply Changes

At last, you’ll need to restart Firefox to apply changes. If you have opened multiple tabs and you don’t want to lose them, you can restart Firefox without losing tabs using methods given in following tutorial:

[Tip] How to Restart Mozilla Firefox Without Losing Tabs

That’s it. Restart Firefox browser and now you’ll see the good old classic theme and user interface back in Firefox browser.

BONUS TIP: Restore Colored Tab bar or Title bar in Firefox

You can also restore colorized tab bar or title bar in Firefox and set any desired color as background color in tab bar or title bar as shown in following image:

Customize_Change_Color_Tabbar_Titlebar_Mozilla_Firefox.png

Following tutorial will help you in getting colored tab bar or title bar back in Firefox newer versions:

[Tip] How to Change Background Color of Tab bar or Title bar in Mozilla Firefox

IMPORTANT INFORMATION:

If you decide to use second code which will also restore colors in title bar, make sure you have enabled “Show accent colors on title bars” option in Windows 10 Settings to enable colorization feature in Firefox title bar or tab bar. Following tutorial will help you in enabling colors in title bars of programs in Windows 10:

[Tip] Get Rid of White Titlebars in Windows 10

By default, the title bar color will be bright Blue but you can change it with any other color by going to Windows 10 Settings -> Personalization -> Colors page as shown in following screenshot:

Change_Customize_Titlebar_Tabbar_Color_Mozilla_Firefox.png

BONUS TIP:

You can also set browser.proton.enabled preference to False in about:config page as mentioned above to restore some classic colors in Firefox UI.

Also Check:

[Tip] Restore “Compact Mode” Density Option in Firefox Customize Window

[Tip] Restore Classic Print Preview Dialog Box UI in Mozilla Firefox

[Fix] Restore Real Working Search Box on New Tab Page in Firefox 89 and Later

[Tip] How to Restore “View Image” Option to Context Menu in Mozilla Firefox

Published in: Mozilla Firefox

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

You are here: Home » Mozilla Firefox » [Tip] New Working Method to Restore Classic Theme and UI in Firefox 91 and Later Versions

Comments

NOTE: Older comments have been removed to reduce database overhead.

  3. ^^ Your existing code already contains style for “menupopup”. Remove its code and then try to use new code.

  4. I found a solution for my title bar question on September 29, 2021 at 9:07 am here:

    discourse.mozilla.org/t/so-now-we-can-not-even-turn-off-proton/83108/28?u=aafn

    If you want less spacing in the menu just add from VG’s css:

    menupopup > menu, menupopup > menuitem{
    padding-block: 2px !important;
    min-height: 0px !important;
    }
    :root{
    --arrowpanel-menuitem-padding: 2px !important;
    }

  6. Very nice, thnx a lot. only Problem i got is that after the Update to the newest Version the 3 Buttons for closing Tab and so on are hiding behind the blue bar.

    prntscr.com/1x4in45

  7. I took it off and added your code to the bottom but taking that part away removes the customized background colour of my bookmark menus and turns them white so I’ll just stick to the 90.2 version I have but thank you.

  8. I finally got the background colour I wanted by adding “-moz-appearance: none !important;
    background-color: #e7d9ad !important }    ” to your existing code in menupop but my entire menu has a white border around it and each separator has a white border around it and I still have floating tabs so thank you for your help but it seems that for the first time I’m not able to tweak FF so I will have to go back to 90.2 or switch browsers for the first time. Thanks.

  9. I now (firefox 94) have problem with right click menu. Menu itself is fine, text is condensed, however under browser menu is separator and another menu for addons options. These addons buttons are much thicker. Any way to make them same size as standard menu?
    Screenshot:
    i.postimg.cc/3Rhw9bk6/firefox-94.png

  10. ^^ Those options were added by 3rd party add-ons, that’s why they are not following CSS style. I’ll try to look in your issue and if I find some solution, will let you know.

  11. This is awesome! Thank you!
    Love FF and these changes make it (hopefully in future too) look fine again.

  12. So helpful, thanks! But there’s one menu (if indeed it’s considered a “menu”) that *didn’t* become more compact with this code. Specifically, I am referring to the dropdown menu on the right, accessed with a downward arrow, that tabs “overflow” to once the tab bar becomes too filled. Is there any code to remove the excess vertical space between these tab “overflow” items as well?

  14. Update to 96 broke UI. Now tabs have black outline. It looks ugly. Can it be removed somehow?
    Example: i.imgur.com/6VKBSXk.png

  16. This worked perfectly first time for me on Mac OS Monterey. Thanks so much for developing and sharing it – it’s much appreciated.

  17. After the new 103 Update the userchrome.css dont follow the titlebar background color anymore. instead the whitesmoke grey design has returned:-( Any fix so far?

  18. ^^ Working fine here in 103 version. Make sure you used the code containing .titlebar-color element.

  19. I have the same after updating to version 103 the userchrome.css dont follow the titlebar background color anymore

  21. I got the Firefox 103 titlebar background color to work by specifying the hex values for the color I wanted. I used the following for black text with tan background (to match my Windows 10 system custom colors).
    .titlebar-color{
    color: #000000;
    background-color: #B09D8B;
    }

    Since the update to Firefox 103 the following code does not work anymore:
    .titlebar-color{
    color: -moz-accent-color-foreground;
    background-color: -moz-accent-color;
    }

    In order to find the hex code for your system colors (if you are using a custom color) you can do the following:
    Go to (Windows 10) Settings/Personalization/Colors, then choose “Custom color” and click on the “More” drop-down menu to see the hex code of your custom color.

  23. I’m using following code and its working fine in version 103:

    .titlebar-color{
    color: #000000;
    background-color: #DEE1E6;
    }

  25. OK, sorry, I tried again and it works now. But I change my wallpaper and Windows color very often, so changing the code “manually” every time is a bit annoying…

  28. Seems like with version 102.30 esr. This broke the css code. I had to remove the menu spacing part, to get it to work. but the tabs part is now working properly. something messed up with the latest esr update.
    Appreciate your work sir .

  29. I just got a new pc with Win 10. I kept on accepting the Firefox updates. I lost the spacing and other attributes. I kept my old pc with Win 7 as backup and to make comparisons with this new pc. I could see that my old pc had the former spacing and color. I tried so many things today. (what a long day) I had seen this page but was wary of making the changes. After trying other things, I came back to this page and was able to follow the directions. The css file that I could download was extremely helpful. (big thanks for this!) The instructions and the file WORKED. I was so shocked and happy that I had a few tears. What a relief to be ‘back to normal.’ Thanks for sharing your knowledge and writing such good instructions.

Leave a Comment

Your email address will not be published. Required fields are marked *

NOTE: Your comment may not appear immediately. It'll become visible once we approve it.