MaterialFox is a user-designed theme for Firefox that turns the Firefox web browser into a material-design inspired browser.

Firefox users have two main options when it comes to changing the default theme of the browser. Starting with Firefox 57 Stable and Firefox 60 ESR, the options are to install themes from the official Mozilla extensions website or to apply custom styles to the browser.

The option to install full themes that could change any part of the browser interface is no longer available as of Firefox 57 and Firefox 60 ESR. The best option to modify the Firefox interface is through the use of styles and CSS but it appears that it is not possible to upload these interface changes to Mozilla's official repository.

Note: MaterialFox has been optimized for Firefox on Mac OS X. While you can install the theme on Windows or Linux devices, expect some quirks that the developer needs to iron out in future releases.

MaterialFox

https://cdn.ghacks.net/wp-content/up...gn-firefox.jpg

Installation of the theme is a bit more complicated than hitting the install button on the Mozilla website. While that is the case, it is the only option to make certain modifications in Firefox as themes can't be used for that.

Here is how you install the theme in Firefox:

1. Go to the project's GitHub page and download the entire project with a click on "clone or download" and the selection of "download ZIP".
2. Extract the archive on your system using built-in unzipping functionality or by using programs such as 7-Zip or Bandizip. If you want to know more about 7-Zip or Bandizip check out our reviews of recent versions.
3. Open Firefox, type about:support and there on the "open folder" button to open the profile folder on the hard drive. You may use about: profiles instead for that.
4. Copy the entire chrome folder into the Firefox profile folder if "chrome" does not exist. - If a chrome folder exists, you may have made modifications to Firefox in the past using the userChrome.css file. You could copy the content of the MozillaFox userChrome.css file and paste it at the end of the existing userChrome.css file in the Firefox profile folder. Note that you may run into dupes if you do depending on the CSS that is already in the file.
   - You do need to copy all other files that are in the MaterialFox chrome folder to the Firefox chrome folder.
5. Load about:config?filter=svg.context-properties.content.enabled and the set the preference to true with a double-click.
6. Install the Firefox extension Simple new tab button.
7. Select Menu > Customize.
8. Remove the "new tab button" on Firefox's tab bar using drag and drop.
9. Move the new tab button of the Simple new tab button extension to the rightmost location on the tab bar of the browser. This places the new tab button at a fixed location on the rightmost side of the tab bar in Firefox.
10. Restart Firefox.

Firefox should open up in the new Material Design look. The theme styles the titlebar and browser toolbox only at this point in time. The developer may release new versions of the theme that style other browser areas such as the right-click context menu.