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:

powershell
$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):

powershell
$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! Buy Me a Coffee at ko-fi.com. 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-force-old-icons	Force the old icons to be used even if the code 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:

   css
   :root, html, body {
       --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 tone
--md-background-color-50	Middle tone
--md-background-color-100	Light tone
--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.

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:

  css
  :root, html, body {
      font-family: YourFontName !important;
  }
  

• Removing the separator line between the browser and content:

  css
  :root, html, body {
      --md-content-separator-color: transparent !important;
  }
  

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.

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:

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

3. Then you can modify the files in the src directory, all changes will be automatically built in the [Profile Folder]/chrome folder.
4. To subsequently start the development mode, just use the following command:

bash
npm run dev

Credits

• MaterialFox by muckSponge
• edge-frfox by bmFtZQ

Troubleshooting

If you encounter any issues:

• Ensure that you have followed all steps accurately, especially in the about:config adjustments.
• Double-check that the appropriate files are extracted into the intended Firefox profile directory.
• Consider restarting Firefox after every update or change to the configuration.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.