🦊 MaterialFox UPDATED

A Firefox user CSS theme that looks similar to Chrome.

🚀 Getting Started

To start using MaterialFox UPDATED, follow these steps:

1. Open Firefox and type about:config in the address bar, then press Enter.

2. If a warning page appears, click Accept the Risk and Continue to access the about:config page.

3. Search for the following preferences using the search bar at the top of the about:config page, and ensure the following preferences are true:

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

4. Type about:support in the address bar and press Enter.

5. Scroll down to the Profile Folder section and click Open Folder.

6. Download the chrome.zip file from the latest release.

7. Extract the contents of chrome.zip into your Firefox profile directory.

8. Restart Firefox to apply the changes.

Installation Script (for Advanced Users)

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

For Windows, run the following PowerShell command:

$env:MATERIAL_FOX_VERSION = "latest"; PowerShell -ExecutionPolicy Unrestricted -c "iwr https://raw.githubusercontent.com/edelvarden/material-fox-updated/main/install.ps1 -useb | iex"

For Firefox version 119 or below (Firefox ESR, Floorp or Waterfox)

$env:MATERIAL_FOX_VERSION = "tags/v1.0.7"; PowerShell -ExecutionPolicy Unrestricted -c "iwr https://raw.githubusercontent.com/edelvarden/material-fox-updated/main/install.ps1 -useb | iex"

💖 Support & Suggestions

If you enjoy this project and want to help me maintain it further, buying me a coffee would be greatly appreciated! ☕️

Your suggestions and bug reports are also welcome on GitHub Issues.

🎨 Manual Customization

You can apply visual design changes by adding some about:config customization options (preferences).

To set a preference, type about:config in the address bar and press Enter.

To enable a preference:

1. Create a custom boolean preference by typing the preference name and clicking the plus button. For example, userChrome.ui-chrome-refresh enables the new Chrome design.

To disable a preference:

1. Search for it by name and delete the preference or toggle its state to false.

Warning

Use only one preference with the prefix theme.

Available preferences

Preference	Description
userChrome.ui-chrome-refresh	Enable the new Chrome design named "Chrome Refresh".
userChrome.theme-chrome-refresh	Enable a new color scheme like in "Chrome Refresh".
userChrome.theme-material	Enable Material color schemes. Read more.
userChrome.theme-default	Enable the default color scheme. This can be useful if you want to use it with Adaptive Tab Bar Color or native Firefox themes
userChrome.ui-compact-url-bar	Make the URL bar more compact by reducing its height.
userChrome.ui-context-menu-icons	Display context menu icons.
userChrome.ui-no-menu-icons	Hide the menu icons
userChrome.ui-force-animation	Force enable control animation, because it respects the user's animation disable preference by default. (Not required if you do not disable animation)
userChrome.ui-system-font	(Windows only) Use the default system font instead of Roboto.
userChrome.ui-force-old-icons	Force the old icons to be used even if the userChrome.ui-chrome-refresh preference is enabled.
userChrome.ui-no-ripple	Disable ripple effect from buttons

Custom CSS rules

You can also add your own user CSS rules by using the custom.css file. Additionally, if you want to change some colors, you can override the default variable values with your own.

Follow these steps:

1. Find and rename the custom_example.css file in the root folder 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 variables below */
  --md-accent-color: #ea4335 !important;
}

5. Save the file and restart Firefox to apply changes.

Note

Using this custom.css file can separate your changes from the source project. You can easily back up your file and not worry about overwriting your changes when updating or reinstalling the main files.

Available variables

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

Tip

You can find more variables in the variables/_colors.scss file. To use these variables, simply add the --md- prefix. For example, "accent-color": #a8c7fa, becomes --md-accent-color: #a8c7fa;.

Custom css use cases

Here are some examples of how you can use the custom.css file:

• Replacing the font with your own. Change "YourFontName" to the name of your font:

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

• Removing the separator line between the browser and content:

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

Custom css use cases for creating your own color themes

Tip

You can use variables to completely recolor the theme. Here are some preset examples with code:

Description	Preview
System accent colors Source code: theme-system-accent.css
Github theme Source code: theme-github.css
Dracula theme Source code: theme-dracula.css

Material Theme

You can use the Material Theme Builder to create a color theme from an image.

1. Create the userChrome.theme-material preference in the about:config page.

2. Go to the Material Theme Builder website.

3. Select from the presented images, upload your own, or use the "Random color" button to generate a theme.

4. Click the "Pick your fonts" button in the bottom right corner.

5. Skip this step and click the "Export theme" button.

6. Click "Export" and select "Web (CSS)" from the dropdown menu.

   

This will download an archive of CSS files. You only need two files: light.css and dark.css. Open these in a text editor and extract the variables to your custom.css file. Wrap the variables in the appropriate media rule for light and dark themes.

Examples with previews

Example	Preview
theme-material-blue.css
theme-material-red.css
theme-material-yellow.css
theme-material-green.css

🔧 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
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

Credits

• MaterialFox by muckSponge
• edge-frfox by bmFtZQ