A Material Design-inspired userChrome.css theme for Firefox
More screenshots of individual UI states (tabs, address bar, menus, …) in light and dark are in tests/visual/baselines.
Inspired by Google's Material Design and their latest Google Chrome UI, this theme turns your Firefox into a Material-styled web browser. The aim was to style the browser as closely as possible to Google Chrome, where practical.
This is a userChrome.css theme, which means you must manually add it to your Firefox profile. The theme overrides certain browser styles. Currently, only the main UI is affected (settings pages, etc. are not). More elements of the UI may be styled in the future but a broader scope becomes harder to maintain as Mozilla updates their browser code so some UI styles may be culled or redone if they become unmaintainable.
- This theme depends on uc.css.js and fx-autoconfig in order to use the
partselector in author stylesheets. Please follow their installation instructions (here) first. - Copy the chrome folder and user.js file into your Firefox profile directory. To find your profile directory, go to about:support or about:profiles.
- See Recommended settings if you'd prefer a more Chrome-like experience.
- Restart Firefox.
You might want to set the following preferences in about:config.
| Pref | Type | Value | Note |
|---|---|---|---|
| materialFox.maximizedNoTopPadding | Boolean | True | Remove the space above the tab bar when Firefox is maximized |
| materialFox.useThemeTabbarColor | Boolean | True | Use a solid MaterialFox background behind the tabs instead of the Firefox theme's gradient |
| browser.tabs.tabClipWidth | Number | 83 | Replicate Chrome's behaviour for clipped tabs (default is 140) |
| browser.uidensity | Number | 1 | Enable compact density in "Customize toolbar ..." |
| security.insecure_connection_text.enabled | Boolean | True | Replicate Chrome's "Not Secure" text on HTTP |
This theme uses SCSS to generate the CSS files for Firefox.
- prefix MaterialFox specific css custom properties (variables): --mf-[variable-name]
- only the current Firefox release is supported. Don't keep workarounds or fallbacks for older versions.
npm install
npm run build[:watch]
See dev/README.md: it launches an isolated Firefox with the theme so you can inspect the browser chrome DOM, take screenshots and hot-reload CSS.
npm run test:visual compares screenshots of the themed UI (toolbar, urlbar, menus, … in light and dark) against baselines, e.g. before and after a Firefox update. See dev/README.md.
-
This is a fork of the original MaterialFox by muckSponge. I've made some changes to the theme to suit my own preferences and I will update this theme as long as I use it myself but I cannot guarantee that it will work with your setup. My configuration is
- Windows/Ubuntu
- Dark theme
- Compact density
Despite that I am willing to make changes to suit other configurations if I find the time and I am open to pull requests that do so.
-
Some custom themes (e.g. Firefox Color) may be incompatible.