Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 months ago
JSON representation
🦊 Firefox user CSS theme looks similar to Chrome
- Host: GitHub
- URL: https://github.com/edelvarden/material-fox-updated
- Owner: edelvarden
- License: mit
- Created: 2022-09-18T15:48:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-15T07:56:49.000Z (4 months ago)
- Last Synced: 2024-09-15T10:50:31.430Z (4 months ago)
- Topics: css, css-theme, firefox, firefox-theme, material, material-design, scss, theme, userchrome
- Language: SCSS
- Homepage:
- Size: 3.65 MB
- Stars: 290
- Watchers: 8
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
🦊 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**](https://github.com/edelvarden/material-fox-updated/releases/latest).
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! [☕️](https://ko-fi.com/edelvarden)
Your **suggestions** and **bug reports** are also welcome 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, **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:
```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 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](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 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](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.
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](chrome/theme-material-blue.css) |  |
| [theme-material-red.css](examples/theme-material-red.css) |  |
| [theme-material-yellow.css](examples/theme-material-yellow.css) |  |
| [theme-material-green.css](examples/theme-material-green.css) |  |
## 🔧 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)