MaterialFox UPDATED

Overview

MaterialFox UPDATED is a user CSS theme designed for the Firefox browser, inspired by material design.

Motivation

The motivation behind creating this theme is my appreciation for material design, and the desire to bring this visually appealing style to the Firefox browser.

Functionality

MaterialFox UPDATED overriding the default CSS with custom styles, utilizing the CSS !important rule.

Getting Started

To start using MaterialFox UPDATED, follow these steps:

1. Go to the following url address about:config

2. Ensure the following properties are set to true:

   • toolkit.legacyUserProfileCustomizations.stylesheets
   • svg.context-properties.content.enabled
   • layout.css.color-mix.enabled

3. Go to the following url address about:support

4. Find Profile Folder and click Open Folder button

5. Download chrome.zip from the latest project releases -> here (or for Firefox 119 or below -> here) and extract into your Firefox profile directory

6. Restart Firefox to apply changes

Installation script (for advanced)

As an alternative to manual installation, you can use PowerShell script.

For Windows you can run the following PowerShell command:

PowerShell -ExecutionPolicy Unrestricted -Command "iwr https://raw.githubusercontent.com/edelvarden/material-fox-updated/main/install.ps1 -useb | iex"

Manual Customization

MaterialFox UPDATED support some about:config customization options.

To set preference:

1. Go to about:config
2. Create a custom boolean preference, just type the preference name and click the plus button, for example userChrome.default-theme-colors

To disable preference, search by name and remove the preference:

1. Go to about:config.
2. Search by name and remove the preference.

Available preferences

Preference	Description
userChrome.compact-url-bar	Make the URL bar more compact by reducing its height.
userChrome.chrome-refresh-2023	Enabling new tab bar design like in Chrome Canary version which named as "Chrome Refresh 2023".
userChrome.chrome-refresh-colors	Enabling new color scheme like in Chrome Canary version.
userChrome.default-theme-colors	Use the default Firefox colors. This can be useful if you want use with Adaptive Tab Bar Color or native Firefox themes
userChrome.system-accent-colors	Use system accent colors
userChrome.force-enable-animations	Force enable control animation, because by default respects the user animation disable preference. (Not required if you do not disable animation)
userChrome.dracula-theme-colors
userChrome.github-theme-colors

Custom CSS rules

MaterialFox UPDATED support custom css rules, or additionally, if you want to change some colors, you can override the default values with your own.

Follow this steps:

1. Find and rename in the root folder custom_example.css to custom.css
2. Open custom.css in a text editor
3. Find the desired variable
4. Add your values, for example, set the accent color to red:

:root,
html,
body {
  /* add your css below */
  --mf-accent-color: #ea4335 !important;
}

5. Save the file and restart Firefox to apply changes

Using these custom css files can separate your changes from the source project and you can easily backup your files and don't worry about overwriting your changes if you want to update or reinstall the main files.

Available variables

Variable name	Description
--mf-accent-color	accent color
--mf-background-color-0	dark tones
--mf-background-color-50	middle tones
--mf-background-color-100	light tones
--mf-text-primary	main text color
--mf-text-secondary	secondary text color
--mf-text-on-accent	text on primary button
--mf-menu-background-color	menu background color
--mf-menu-background-color-hover	menu items background color on mouse over
--mf-menu-border-color	controls border color
--mf-icon-color-primary	navigation bar icons color
--mf-icon-color-secondary	URL bar icons color
--mf-content-separator-color	separator line between browser and content area
--mf-selection-text-color	text selection color
--mf-selection-background-color	selection background color

Some other examples

• Replacing the font with your own, change "YourFontName" to the name of your font:

  :root,
  html,
  body {
    /* add your css below */
  }
  
  *,
  *::before,
  *::after {
    font-family: "YourFontName" !important;
  }

• Remove the separator line between browser and content:

  :root,
  html,
  body {
    /* add your css below */
    --mf-content-separator-color: transparent !important;
  }

Build & Development (for developers)

Prerequisites

• Visual Studio Code (development environment)
• NodeJS (for npm)

Installation

1. Open Firefox profile directory in terminal.
2. Clone this repo with the following command:

git clone https://github.com/edelvarden/material-fox-updated.git chrome
cd chrome
npm install
npx husky install
npm run dev

Project structure

[Profile Folder]
└── chrome
    ├── chrome
    ├── src
    │   ├── user-chrome
    │   ├── user-content
    │   ├── user-chrome.scss
    │   └── user-content.scss
    ├── package-lock.json
    ├── package.json
    ├── userChrome.css
    └── userContent.css

3. Then you can modify the files in the src directory, all changes will be automatically build in the [Profile Folder]/chrome/chrome folder.

To subsequently start the development mode, just use the following command:

npm run dev

Screenshots

Light	Dark

Credits

• MaterialFox by muckSponge
• edge-frfox by bmFtZQ