[Tip] Get Google Chrome Material Design UI in Mozilla Firefox

If you use Mozilla Firefox web browser and want to make it look-like Google Chrome, this article will definitely please you.

Recently Google announced and implemented a new Material Design UI (also referred as Material Refresh or Material Design 2.0) in Chrome web browser which comes with a brand new user interface and changes such as round curved tabs, round edges of address bar, color changes, etc.

Check out following topic for details:

Advertisement

[Tip] Enable New “Material Design Refresh” UI in Google Chrome

If you want to get the same Material Design Refresh UI in Mozilla Firefox, this tutorial will help you. Today in this tutorial, we are going to share step-by-step instructions to transform Mozilla Firefox into Google Chrome’s Material Design UI as shown in following image:

Get_Google_Chrome_Material_Design_UI_Mozilla_Firefox.png

Thanks to our friend “MuckSponge” at DA for creating and sharing the required files to bring Google Chrome’s Material Design UI to Mozilla Firefox.

Let’s start the tutorial:

STEP 1:

First of all download the required files from following link:

Advertisement

Download MaterialFox

Direct Download Link

STEP 2:

After downloading the ZIP file, extract it using 7-Zip or any other file archive utility. You’ll get “MaterialFox-master” folder. Open this folder and you’ll see another folder “chrome“. That’s the main folder which we need.

STEP 3:

Now we need to open Mozilla Firefox profile folder. You can open the profile folder using “%appdata%\Mozilla\Firefox\Profiles\” path or using about:support URL as mentioned in following tutorial:

All About Mozilla Firefox Profile Folder and Configuration Files

STEP 4:

Once you open the xxxxxxx.default folder, copy the Chrome folder from downloaded “MaterialFox-master” folder and paste inside xxxxxxx.default folder.

Copy_Chrome_Folder_Mozilla_Firefox_Profile_Folder.png

NOTE: Sometimes some users create their own userContent.css and userChrome.css files to customize Firefox functionality and UI (See example). This “MaterialFox” theme also contains userChrome.css file. So if you already have this file in your Firefox Profile folder, copy the given code in the new userChrome.css file and paste it at the end of the existing userChrome.css file.

Also Check:

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

STEP 5:

Now open Firefox and you’ll notice a new Material Design UI as shown in following screenshot:

Black_Tabs_Icons_Problem_Mozilla_Firefox.png

But you can see all the tabs are showing black and icons are looking weird.

To fix the issue follow next step.

STEP 6:

Type about:config in Firefox addressbar and press Enter. It’ll show you a warning message, click on “I accept the risk!” button.

Now type svg.context in Search filter box and it’ll show following preference in the window:

svg.context-properties.content.enabled

Enable_SVG_Context_Properties_Content_Option_Mozilla_Firefox.png

This preference is set to false by default i.e. disabled. To enable the feature, double-click on it and change its value to true. Alternatively, you can right-click on the preference and select Toggle option.

Now switch to any other tab or restart Firefox and the black tab and icons problem will be fixed.

Transform_Mozilla_Firefox_Google_Chrome_Material_Design_Refresh_UI.png

STEP 7:

One more thing! If you are using Windows 10, you’ll also need to enable “Show accent color in title bar” option in “Settings -> Personalization -> Colors” page as mentioned here. Otherwise inactive tabs looks dark as shown in following screenshot:

Inactive_Tabs_Color_Problem_Mozilla_Firefox.png

To fix this issue, either enable the above mentioned option or switch to Light or Dark themes in Firefox as mentioned here. It’ll make the inactive tabs looking fine as shown in following screenshot:

Light_Color_Material_Design_UI_Mozilla_Firefox.png

UNINSTALL STEPS:

If you want to uninstall material design UI and restore default look of Firefox, simply remove the copied Chrome folder from Firefox profile folder and restart Firefox.

Thanks to muckSponge for sharing it…

Published in: Google Chrome, 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.

Comments

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

  1. Excellent!! One more query if you do not mind. How do I change the color of the bookmark bar and the active tab from white to something else? Is this something that is in the _vars.css file?

  2. Is is possible to change right click context menu design in Windows? I guess chrome material design is good for context menu as compare to classic design of context menu.

  3. For Ubuntu based Linux users:
    At step 4, you have to paste the “chrome” folder in your “Root Directory”, which you can easily find from about:profiles page.

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.