A Material Design-inspired userChrome.css theme for Firefox
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
chrome Force menuitem text and icon to inherit colour Feb 16, 2019
.gitignore Initial Aug 22, 2018
LICENSE Initial commit Aug 22, 2018
README.md Removed MaterialFox Helper from README Jan 26, 2019

README.md

MaterialFox

A Material Design-inspired userChrome.css theme for Firefox

Preview This theme is powered by blood, sweat, and coffee. If you like it, please consider helping out to support its continued development.

Buy me a coffee

What this does

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 the latest Google Chrome dev builds, 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.

Installation

Some steps involve accessing the about:config page. You can get there by typing it into your urlbar.

Mandatory instructions

  1. Copy the chrome folder into your Firefox profile directory. To find your profile directory, go to about:support. Alternatively, you can symlink your chrome folder instead of copying.
  2. [about:config] Set svg.context-properties.content.enabled to true (default is false).
  3. Restart Firefox.

Recommended instructions

Add space above tab bar:

  • Right click on toolbar -> Customize.
  • Check Drag Space checkbox.

Emulate Chrome's profile switcher button:

  • Right click on toolbar -> Customize.
  • Drag Synced Tabs to the toolbar.

Replicate Chrome behaviour for clipped tabs:

  • [about:config] Set browser.tabs.tabClipWidth to 83 (default is 144).

Allow tabs to shrink more; tabs in overflow will look the same as pinned tabs:

  • [about:config] Add new entry materialFox.reduceTabOverflow with value true.

Replicate Chrome's "Not Secure" on HTTP:

  • [about:config] Set security.insecure_connection_text.enabled to true.

Please note

  • Linux is not frequently tested; last tested on 07/09/2018.
  • Some customisation settings may no longer work (such as compact density).
  • Some custom themes may clash with address bar.