MaterialFox UPDATED is a user CSS theme designed for the Firefox browser, inspired by material design.
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.
MaterialFox UPDATED overriding the default CSS with custom styles, utilizing the CSS !important
rule.
To start using MaterialFox UPDATED, follow these steps:
Go to the URL about:config
.
Ensure the following properties are set to true
:
toolkit.legacyUserProfileCustomizations.stylesheets
svg.context-properties.content.enabled
layout.css.color-mix.enabled
Go to the URL about:support
.
Find the Profile Folder
category and click the Open Folder
button.
Download chrome.zip
from the latest project releases -> here (or for Firefox 119 or below -> here) and extract into your Firefox profile directory.
Restart Firefox to apply changes.
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"
MaterialFox UPDATED support some about:config
customization options.
To set a preference:
about:config
.userChrome.theme-default
.To disable a preference:
about:config
.false
.Preference | Description |
---|---|
userChrome.ui-chrome-refresh |
Enabling new Chrome design which named as "Chrome Refresh".![]() |
userChrome.theme-chrome-refresh |
Enabling new color scheme like in "Chrome Refresh". |
userChrome.theme-material |
Enabling Meterial color schemes. Read more. |
userChrome.theme-default |
Enabling default color scheme. This can be useful if you want use 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-no-menu-icons |
Hide menu icons |
userChrome.ui-force-animation |
Force enable control animation, because by default respects the user animation disable preference. (Not required if you do not disable animation) |
userChrome.ui-force-old-icons |
Force old icons to be used even if the userChrome.ui-chrome-refresh preference is enabled. |
userChrome.ui-no-ripple |
Disable ripple effect from buttons |
[!WARNING]
Use only one preference with the prefixtheme
.
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:
custom_example.css
file in the root folder to custom.css
.custom.css
in a text editor.:root,
html,
body {
/* add your css variables below */
--md-accent-color: #ea4335 !important;
}
[!NOTE]
Using these custom CSS files can separate your changes from the source project. You can easily back up your files and not worry about overwriting your changes when updating or reinstalling the main files.
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;
.
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;
}
Remove the separator line between browser and content:
:root,
html,
body {
/* add your css variables below */
--md-content-separator-color: transparent !important;
}
You can use variables to completly recolor to your own color, some examples with code:
Description | Preview |
---|---|
System accent colors
Source code: |
![]() ![]() ![]() |
Github theme
Source code: |
![]() |
Dracula theme
Source code: |
![]() |
You can use the Material Theme Builder to create a color theme from an image.
userChrome.theme-material
preference in the about:config
page.Click "Export" and select "Web (CSS)" from the dropdown menu.
This will download an archive of CSS files. You need only 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 | ![]() |
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
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
Light | Dark |
---|---|
![]() |
![]() |