That way, you don’t lose any customizations you’ve already applied. 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. If you don’t already have a chrome folder in your profile folder, skip to the next section. Your Chrome profile opens in a new File Explorer window.

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

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

You can also access your profile folder from within Firefox. To open your profile folder, type (or copy and paste) the following path into the address bar in File Explorer and press Enter. But, first, let’s check if you already have a chrome folder and your own custom userChrome.css file in your Firefox profile folder. The chrome folder contains userChrome.css file used to apply the Material Design UI to Firefox. We’re going to copy the chrome folder from the MaterialFox-master folder we downloaded. If you use Windows’ built-in extraction tool, click Browse to choose a download location.Ĭheck the Show extracted files when complete box to open a File Manager window directly to the downloaded folder when the extraction is complete. Save the file to a folder on your hard drive.Įxtract the files using the built-in extraction tool in Windows or a third-party tool like 7-Zip or WinZip. Download and Extract the Required Filesĭownload the MaterialFox zip file to get the required files.Ĭlick Clone or download on the web page and then click Download ZIP. Now we’ll apply the Material Design UI to Firefox and get rounded corners and the material design icons. Here’s how the Firefox tabs and icons look before applying the Material Design UI to Firefox:

Before Switching to the Material Design UI

Mozilla firefox theme colored tabs