Install a Material Design inspired theme in Firefox
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
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:
- 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".
- 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.
- 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.
- 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.
- Load about:config?filter=svg.context-properties.content.enabled and the set the preference to true with a double-click.
- Install the Firefox extension Simple new tab button.
- Select Menu > Customize.
- Remove the "new tab button" on Firefox's tab bar using drag and drop.
- 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.
- 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.
Now You: Do you use themes or modifications in Firefox or your browser?
GUI doesnt look good after latest Mozilla Update. Please help.
I use the Compact Moon theme (and accompanying Compact Moon Options extension) in Pale Moon. I have so many pinned tabs in my standard session that without Compact Moon, I’d have to choose a multi-row tab bar in Tab Mix Plus. Actually, you know what? I recently pinned a few more tabs to monitor what my router (which I strongly suspect of sucking) is up to, plus a tab to monitor local air quality (which has been *terrible* here in Seattle, thanks to wildfires) and that left me with too little space for unpinned tabs. I just switched to a two-row tab bar. But without Compact Moon, it would have to be three or four rows. ;-) Anyway, I only have a 15.6″ screen, so two thumbs up for Compact Moon.
Do NOT know why here is so much Negativity against Themers, i really like the Design transscirpted to FF.
I think it’s a good one and thanks alot to the Maker. And it is for free, so be a little more patient.
In my Mind, i think it’s better than Quantum UI and similar to Chrome Refresh Design, or equal and smooth.
So, keep calm u no have to use it, but i think, that is what Quantum should have been,…end of line……..
@John Doe 101
What negativity is there about theming? I literally don’t see a single comment disparaging that, and see several embracing it.
Not sure what Material Design is supposed to mean; the opposite of Immaterial Design? It’s gotten to where I just ignore all the contrived gibberish designed to keep material interest in immaterial fleeting changes. For the most part, “developers” are wholly incapable of explaining what their developments do. There are plenty of good developers (no quotes!) outputting useful code they can explain, however. Mainly, I just want web stuff to work!
My browser’s very customized but for functionality, not purtiness, the only appearance change is a soft seafoam frame. The vast majority of appearance changes seem to make text and icons almost unreadable. Yeah, the entire solar system in your browser may be cool but not if the controls are buried in Uranus.
omg no. Material design needs to die a hipster death not be expanded.
Thank You! I’m thinking the exact same thing.
A browser out of the box never satisfies me, neither many default settings neither their layout, ugly and space poorly thought. Because Firefox is my browser of choice I tweak its layout consistently and I do this since it’s version 57 via my FF profile’s userChrome.css and userContent.css.
I agree of course with Money’s comment : “[…]until corporate Mozilla gets userChrome.css on the chopping block”. That’s going to pose a problem (I mean a challenge!).
I tweak almost every part of Firefox’s GUI, thanks to:
Custom CSS for Firefox : https://github.com/Aris-t2/CustomCSSforFx
Custom Scrollbars for Firefox : https://github.com/Aris-t2/Scrollbars
simpleMenuWizard : https://github.com/stonecrusher/simpleMenuWizard
userChrome.js support to Firefox : https://gist.github.com/Sporif/db6b3440fba0b1bcf5477afacf93f875
The latter, userChrome.js support to Firefox, does marvels. First I have in mind, among everything it allows me to do, is the NewTab_custom-page.uc.js (https://luke-baker.github.io/) with which you can set your newtab page with 20 lines of code, no localhost required, beautiful! Nine other userChrome.js files here and there goes Firefox as nice as before 57 …
Forgot to mention that I modify most extensions’ toolbar icons, not because they are ugly for most of them (this is not a beauty parlor, it’s a browser!) but because I can’t figure them out : 16px has to be drawn on a 16px frame, not resized from 128 or even 64 to 16px in which case you see nothing, not relevant, hard to differentiate chaos1 from chaos2 …
That’s all, Folks :=)
Yes, I heavily modify the look & feel in my primary browser (Waterfox) using Classic Theme Restorer. I’m not a big fan of the Chrome-like UI (nor of the Material Design aesthetic).
@ John Fenderson,
Re: Waterfox which I also use, do you happen to know what all those user enabled telemetry settings in about:config are all about?
For example, there’s one called “toolkit.telemetry.cachedClientID” which appears in bold type with an alpha-numeric value.
Another one is “devtools.telemetry.tools.opened.version” with the value (“DEVTOOLS_SCREEN_RESOLUTION_ENUMERATED_PER USER”:”56.2.2″)
One of the reasons I use Waterfox is because I was under the impression that all telemetry was disabled.
I got all these and others by just typing “telemetry” (without quotes in the Filter field at the top).
Oh, and I haven’t to my knowledge deliberately enabled any telemetry settings in Waterfox.
@TelV
I can’t say, specifically, but I do know that there are a number of about:config entries that are just left over from Firefox and don’t really do anything in Waterfox. There are a few bugs filed in the Waterfox bug tracker to have these removed in order to prevent confusion.
The entries you cite may (or may not) be in that class. I don’t know. There would be no harm in changing those settings to something that you’re comfortable with.
I have not done a full security audit of Waterfox (meaning, in part, that I haven’t sniffed the traffic it generates), so I can’t speak with authority on this. My standard practice is to block all outgoing communications with my firewall by default, then whitelist specific things I’m OK with. That way, if something sneaky is trying to phone home, it can’t.
Thanks for the response John.
I assume you don’t have similar settings in the telemetry section in Waterfox?
It’s not safe using outdated browser!
Waterfox isn’t outdated.
@anonymous Ir is not safe to be a die-hard Mozgoogle Firechrome supporter ;)
Cute… until corporate Mozilla gets userChrome.css on the chopping block.