How-To

How to Get the Google Chrome Material Design Theme in Firefox

If you don’t like the look of the squared-off corners on the tabs in Firefox, you can give them the rounded look of Chrome’s Material Design UI.

If you don’t like the look of the squared-off corners on the tabs in Firefox, you can give them the rounded look of Chrome’s Material Design UI. You can also put rounded ends on the address bar and convert the Firefox toolbar icons to Material Design icons. Today we’ll show you how you can get the Chrome’s Material Design UI in Firefox.

Before Switching to the Material Design UI

Here’s how the Firefox tabs and icons look before applying the Material Design UI to Firefox:

Square tabs in Firefox, before applying Material Design UI

Now we’ll apply the Material Design UI to Firefox and get rounded corners and the material design icons.

Download and Extract the Required Files

Download the MaterialFox zip file to get the required files.

Click Clone or download on the web page and then click Download ZIP. Save the file to a folder on your hard drive.

Download MaterialFox zip file

Extract the files using the built-in extraction tool in Windows or a third-party tool like 7-Zip or WinZip.

Extract MaterialFox zip file

If you use Windows’ built-in extraction tool, click Browse to choose a download location.

Check the Show extracted files when complete box to open a File Manager window directly to the downloaded folder when the extraction is complete. Click Extract.

Windows 10 Extract dialog

Open Your Firefox Profile Folder

We’re going to copy the chrome folder from the MaterialFox-master folder we downloaded. The chrome folder contains userChrome.css file used to apply the Material Design UI to Firefox. But, first, let’s check if you already have a chrome folder and your own custom userChrome.css file in your Firefox profile folder.

To open your profile folder, type (or copy and paste) the following path into the address bar in File Explorer and press Enter.

%appdata%\Mozilla\Firefox\Profiles\

Paste profile path in File Explorer

You can also access your profile folder from within Firefox.

Type: about:support in the address bar and press Enter.

Or, you can go to Firefox menu > Help > Troubleshooting Information and then, under Application Basics, click Open Folder next to Profile Folder.

Open profile folder in Firefox

Your Chrome profile opens in a new File Explorer window. Leave this window open.

Edit an Existing userChrome.css File

If you don’t already have a chrome folder in your profile folder, skip to the next section.

If you have a chrome folder in your profile folder and a userChrome.css file in the chrome folder, then we’ll edit the existing userChrome.css file. That way, you don’t lose any customizations you’ve already applied.

The MaterialFox-master folder you downloaded contains a chrome folder with a userChrome.css file in it. Open that userChrome.css file in a text editor like Notepad, copy everything in it, and close the file.

Then, open your own userChrome.css file (in the chrome folder inside your profile folder) in a text editor. Paste the text you copied at the end of your userChrome.css file and save and close the file.

Copy content of MaterialFox userChrome.css file

Copy and Paste the Downloaded chrome Folder

If you don’t already have a chrome folder in your profile folder, open a new File Explorer window and then open the MaterialFox-master folder you extracted.

Copy the chrome folder in the MaterialFox-master folder.

Copy chrome folder in MaterialFox folder

Go back to the File Explorer window with your profile folder open.

Paste the chrome folder you copied from the MaterialFox-master folder into your profile folder.

Paste the chrome folder into your Firefox profile

Fix the Black Tabs and Strange-Looking Icons

Open Firefox to see the result of the new Material Design UI settings.

You’ll notice that the tabs are black, and the icons look strange.

Black Material Design tabs in Firefox

We’ll fix this issue using a Firefox configuration setting.

Type: about:config in the Firefox address bar and press Enter. You’ll see a warning message.

Click I accept the risk! to continue.

Go to about:config in Firefox

Type: svg.context in the Search box. The following preference displays:

svg.context-properties.content.enabled

This preference is set to false by default, which means it’s disabled.

To enable the feature, double-click it to change its value to true. You can also right-click on the preference and select Toggle.

Double-click the svg.context preference

Now switch to any other tab or restart Firefox. The black tabs and strange-looking icons are fixed.

Black tabs in Firefox fixed

Show the Windows 10 Accent Color on the Firefox Title Bar

In Windows 10, there’s one more thing to change, if you want the title bar and inactive tabs in Firefox to not be black.

Click Settings on the Start menu and go to Personalization > Colors.

Check the Title bars and window borders box under Show accent color on the following surfaces.

Show accent color options in Windows 10

Enjoy the Material Design UI in Firefox

Now the tabs have nice rounded corners and the icons have the Material Design look. And the title bar and inactive tabs have the accent color you chose in the Windows 10 settings.

Accent color on Firefox title bar

Uninstall the Material Design UI from Firefox

If you decide you want to go back to the sharp corners on the tabs and the original icons in Firefox, it’s easy. Do one of the following:

  • If you copied the chrome folder from the MaterialFox-master folder to your profile folder, delete that chrome folder.
  • If you copied the text from the userChrome.css file in the MaterialFox-master folder and pasted it into your own userChrome.css file, open your userChrome.css file and delete the text you pasted into it.

Click to comment
To Top