Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/edelvarden/material-fox-updated

🦊 Firefox user CSS theme looks similar to Chrome
https://github.com/edelvarden/material-fox-updated

css css-theme firefox firefox-theme material material-design scss theme userchrome

Last synced: about 1 month ago
JSON representation

🦊 Firefox user CSS theme looks similar to Chrome

Awesome Lists containing this project

README 

        


  🦊 MaterialFox UPDATED




![preview](assets/preview.png)



## 📖 Overview



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



## 🎯 Motivation



This theme was created out of appreciation for material design and the desire to bring this visually appealing style to the Firefox browser.



## ⚙️ Functionality



MaterialFox UPDATED overrides 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 preferences are `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 release here**](https://github.com/edelvarden/material-fox-updated/releases/latest).



6. **Extract** the contents into your Firefox profile directory.

7. **Restart** Firefox to apply 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

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

```



## 💬 Feedback



Feel free to provide **feedback**, **suggestions**, or **bug reports** on [GitHub Issues](https://github.com/edelvarden/material-fox-updated/issues).



## 🎨 Manual Customization



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



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 its state to `false`.



### Available preferences



> [!WARNING]  

> Use only one preference with the prefix `theme`.



  

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

  



## 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 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:



```css

: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 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](src/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:



  ```css

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



  ```css

  :root,

  html,

  body {

    /* add your css variables below */

    --md-content-separator-color: transparent !important;

  }

  ```



### Custom css use cases for create 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

    


    preview-github

  

  

    

      
Dracula theme

      Source code: 
theme-dracula.css

    


    preview-dracula

  



## Material Theme



You can use the [Material Theme Builder](https://material-foundation.github.io/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](https://material-foundation.github.io/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](assets/material-theme-tutorial.png)



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](chrome/theme-material-blue.css) | ![material-blue-preview](assets/material-blue-preview.png) |

| [theme-material-red.css](assets/examples/theme-material-red.css) | ![material-red-preview](assets/material-red-preview.png) |

| [theme-material-yellow.css](assets/examples/theme-material-yellow.css) | ![material-yellow-preview](assets/material-yellow-preview.png) |

| [theme-material-green.css](assets/examples/theme-material-green.css) | ![material-green-preview](assets/material-green-preview.png) |



## 🔧 Build & Development (for developers)



### Prerequisites



- [Visual Studio Code](https://code.visualstudio.com/) (development environment)

- [NodeJS](https://nodejs.org/en/download) (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

```



Project structure



```plaintext

[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:



```bash

npm run dev

```



## 🔗 Credits



- [MaterialFox](https://github.com/muckSponge/MaterialFox) by [muckSponge](https://github.com/muckSponge)

- [edge-frfox](https://github.com/bmFtZQ/edge-frfox) by [bmFtZQ](https://github.com/bmFtZQ)