Skip to content

edelvarden/material-fox-updated

Repository files navigation

MaterialFox UPDATED

preview

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 URL 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 URL about:support.

  4. Find the Profile Folder category and click the 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 a preference:

  1. Go to about:config.
  2. Create a custom boolean preference by typing the preference name and clicking the plus button, for example, userChrome.theme-default.

To disable a preference:

  1. Go to about:config.
  2. Search by name and delete the preference or toggle preference state to false.

Available preferences

Preference Description
userChrome.ui-chrome-refresh Enabling new Chrome design which named as "Chrome Refresh".preview-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 prefix theme.

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 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;
}
  1. Save the file and restart Firefox to apply changes

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.

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

  • 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;
    }

Custom css use cases for create your own color themes

You can use variables to completly recolor to your own color, some examples with code:

Description Preview

System accent colors

Source code:
theme-system-accent.css

Github theme

Source code:
theme-github.css
preview-github

Dracula theme

Source code:
theme-dracula.css
preview-dracula

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.

    material-theme-tutorial

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 material-blue-preview
theme-material-red.css material-red-preview
theme-material-yellow.css material-yellow-preview
theme-material-green.css material-green-preview

Build & Development (for developers)

Prerequisites

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
  1. 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
preview-light preview-dark

Credits