{"id":13479123,"url":"https://github.com/edelvarden/material-fox-updated","last_synced_at":"2025-03-27T09:30:47.536Z","repository":{"id":157345209,"uuid":"538158622","full_name":"edelvarden/material-fox-updated","owner":"edelvarden","description":"🦊 Firefox user CSS theme looks similar to Chrome","archived":false,"fork":false,"pushed_at":"2024-09-15T07:56:49.000Z","size":3823,"stargazers_count":290,"open_issues_count":2,"forks_count":12,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-09-15T10:50:31.430Z","etag":null,"topics":["css","css-theme","firefox","firefox-theme","material","material-design","scss","theme","userchrome"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edelvarden.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"edelvarden","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":null}},"created_at":"2022-09-18T15:48:10.000Z","updated_at":"2024-09-15T07:56:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"acf97f95-5fae-49af-acdf-e645d43b8e9b","html_url":"https://github.com/edelvarden/material-fox-updated","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edelvarden%2Fmaterial-fox-updated","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edelvarden%2Fmaterial-fox-updated/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edelvarden%2Fmaterial-fox-updated/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edelvarden%2Fmaterial-fox-updated/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edelvarden","download_url":"https://codeload.github.com/edelvarden/material-fox-updated/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222222205,"owners_count":16951399,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-theme","firefox","firefox-theme","material","material-design","scss","theme","userchrome"],"created_at":"2024-07-31T16:02:09.903Z","updated_at":"2024-10-30T12:31:34.902Z","avatar_url":"https://github.com/edelvarden.png","language":"SCSS","funding_links":["https://ko-fi.com/edelvarden","https://ko-fi.com/edelvarden'"],"categories":["SCSS","css"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  🦊 MaterialFox UPDATED\n\u003c/h1\u003e\n\n\u003ch2 align=\"center\"\u003e\n  A Firefox user CSS theme that looks similar to Chrome.\n\u003c/h2\u003e\n\n![preview](docs/assets/preview.png)\n\n## 🚀 Getting Started\n\nTo start using MaterialFox UPDATED, follow these steps:\n\n1. **Open** Firefox and type `about:config` in the address bar, then press \u003ckbd\u003eEnter\u003c/kbd\u003e.\n2. If a warning page appears, **click** `Accept the Risk and Continue` to access the `about:config` page.\n3. **Search** for the following preferences using the search bar at the top of the `about:config` page, and **ensure** the following preferences are `true`:\n\n   - `toolkit.legacyUserProfileCustomizations.stylesheets`\n   - `svg.context-properties.content.enabled`\n   - `layout.css.color-mix.enabled`\n\n4. **Type** `about:support` in the address bar and press \u003ckbd\u003eEnter\u003c/kbd\u003e.\n5. **Scroll down** to the `Profile Folder` section and **click** `Open Folder`.\n6. **Download** the `chrome.zip` file from the [**latest release**](https://github.com/edelvarden/material-fox-updated/releases/latest).\n7. **Extract** the contents of `chrome.zip` into your Firefox profile directory.\n8. **Restart** Firefox to apply the changes.\n\n### Installation Script (for Advanced Users)\n\nAs an alternative to manual installation, you can use a PowerShell script.\n\nFor **Windows**, run the following PowerShell command:\n\n```powershell\n$env:MATERIAL_FOX_VERSION = \"latest\"; PowerShell -ExecutionPolicy Unrestricted -c \"iwr https://raw.githubusercontent.com/edelvarden/material-fox-updated/main/install.ps1 -useb | iex\"\n```\n\nFor Firefox version **119** or below (Firefox ESR, Floorp or Waterfox)\n\n```powershell\n$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\"\n```\n\n## 💖 Support \u0026 Suggestions\n\nIf 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)\n\n\u003ca href='https://ko-fi.com/edelvarden' target='_blank'\u003e\u003cimg height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /\u003e\u003c/a\u003e\n\nYour **suggestions** and **bug reports** are also welcome on [GitHub Issues](https://github.com/edelvarden/material-fox-updated/issues).\n\n## 🎨 Manual Customization\n\nYou can **apply** visual design changes by adding some `about:config` customization options (preferences).\n\nTo **set** a preference, **type** `about:config` in the address bar and press \u003ckbd\u003eEnter\u003c/kbd\u003e.\n\nTo **enable** a preference:\n\n1. **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.\n\nTo **disable** a preference:\n\n1. **Search** for it by name and **delete** the preference or toggle its state to `false`.\n\n\u003e [!WARNING]  \n\u003e Use only one preference with the prefix `theme`.\n\n### Available preferences\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ePreference\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-chrome-refresh\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eEnable the new Chrome design named \"Chrome Refresh\".\u003cimg src=\"docs/assets/preview-chrome-refresh.png\" alt=\"preview-chrome-refresh\"\u003e\u003c/img\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.theme-chrome-refresh\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eEnable a new color scheme like in \"Chrome Refresh\".\u003c/img\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.theme-material\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eEnable Material color schemes. \u003ca href=\"#material-theme\" _blank\u003eRead more\u003c/a\u003e.\u003c/img\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.theme-default\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eEnable the default color scheme. This can be useful if you want to use it with \u003ca href=\"https://addons.mozilla.org/firefox/addon/adaptive-tab-bar-colour/\" _blank\u003eAdaptive Tab Bar Color\u003c/a\u003e or native Firefox themes\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-compact-url-bar\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eMake the URL bar more compact by reducing its height.\u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-context-menu-icons\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDisplay context menu icons.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-no-menu-icons\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eHide the menu icons\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-force-animation\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eForce enable control animation, because it respects the user's animation disable preference by default. \u003cem\u003e(Not required if you do not disable animation)\u003c/em\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-system-font\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003e(Windows only) Use the default system font instead of Roboto.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-force-old-icons\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eForce the old icons to be used even if the \u003ccode\u003euserChrome.ui-chrome-refresh\u003c/code\u003e preference is enabled.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003euserChrome.ui-no-ripple\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eDisable ripple effect from buttons\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Custom CSS rules\n\nYou 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.\n\nFollow these steps:\n\n1. **Find and rename** the `custom_example.css` file in the root folder to `custom.css`.\n2. **Open** `custom.css` in a text editor.\n3. **Find** the desired variable.\n4. **Add your values**. For example, set the accent color to red:\n\n```css\n:root,\nhtml,\nbody {\n  /* add your css variables below */\n  --md-accent-color: #ea4335 !important;\n}\n```\n\n5. Save the file and restart Firefox to apply changes.\n\n\u003e [!NOTE]  \n\u003e 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.\n\n### Available variables\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eVariable name\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-accent-color\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eaccent color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-background-color-0\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003edark tones\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-background-color-50\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003emiddle tones\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-background-color-100\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003elight tones\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-text-primary\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003emain text color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-text-secondary\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003esecondary text color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-text-on-accent\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003etext on primary button\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-menu-background-color\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003emenu background color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-menu-background-color-hover\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003emenu items background color on mouse over\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-menu-border-color\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003econtrols border color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-icon-color-primary\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enavigation bar icons color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-icon-color-secondary\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eURL bar icons color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-content-separator-color\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eseparator line between browser and content area\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-selection-text-color\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003etext selection color\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003ccode\u003e--md-selection-background-color\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eselection background color\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e [!TIP]\n\u003e 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;`.\n\n### Custom css use cases\n\nHere are some examples of how you can use the `custom.css` file:\n\n- **Replacing** the font with your own. **Change** `\"YourFontName\"` to the name of your font:\n\n  ```css\n  :root,\n  html,\n  body {\n    /* add your css variables below */\n  }\n\n  /* add your user css below */\n  *,\n  *::before,\n  *::after {\n    font-family: \"YourFontName\" !important;\n  }\n  ```\n\n- **Removing** the separator line between the browser and content:\n\n  ```css\n  :root,\n  html,\n  body {\n    /* add your css variables below */\n    --md-content-separator-color: transparent !important;\n  }\n  ```\n\n### Custom css use cases for creating your own color themes\n\n\u003e [!TIP]\n\u003e You can use variables to completely recolor the theme. Here are some preset examples with code:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003ePreview\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ch2\u003eSystem accent colors\u003c/h6\u003e\n      Source code: \u003cbr\u003e\u003ca href=\"examples/theme-system-accent.css\" _blank\u003etheme-system-accent.css\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"docs/assets/preview-accent-1.png\" alt=\"\"/\u003e\u003cimg src=\"docs/assets/preview-accent-2.png\" alt=\"\"/\u003e\u003cimg src=\"docs/assets/preview-accent-3.png\" alt=\"\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ch2\u003eGithub theme\u003c/h6\u003e\n      Source code: \u003cbr\u003e\u003ca href=\"examples/theme-github.css\" _blank\u003etheme-github.css\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"docs/assets/preview-github.png\" alt=\"preview-github\"\u003e\u003c/img\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ch2\u003eDracula theme\u003c/h6\u003e\n      Source code: \u003cbr\u003e\u003ca href=\"examples/theme-dracula.css\" _blank\u003etheme-dracula.css\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"docs/assets/preview-dracula.png\" alt=\"preview-dracula\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\n\u003c/table\u003e\n\n## Material Theme\n\nYou can use the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) to create a color theme from an image.\n\n1. **Create** the `userChrome.theme-material` preference in the `about:config` page.\n2. **Go to** the [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/) website.\n3. **Select** from the presented images, **upload** your own, or **use** the \"Random color\" button to **generate** a theme.\n4. **Click** the \"Pick your fonts\" button in the bottom right corner.\n5. **Skip** this step and **click** the \"Export theme\" button.\n6. **Click** \"Export\" and **select** \"Web (CSS)\" from the dropdown menu.\n\n   ![material-theme-tutorial](docs/assets/material-theme-tutorial.png)\n\nThis 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.\n\nExamples with previews\n| Example | Preview |\n| --- | --- |\n| [theme-material-blue.css](chrome/theme-material-blue.css) | ![material-blue-preview](docs/assets/material-blue-preview.png) |\n| [theme-material-red.css](examples/theme-material-red.css) | ![material-red-preview](docs/assets/material-red-preview.png) |\n| [theme-material-yellow.css](examples/theme-material-yellow.css) | ![material-yellow-preview](docs/assets/material-yellow-preview.png) |\n| [theme-material-green.css](examples/theme-material-green.css) | ![material-green-preview](docs/assets/material-green-preview.png) |\n\n## 🔧 Build \u0026 Development (for developers)\n\n### Prerequisites\n\n- [Visual Studio Code](https://code.visualstudio.com/) (development environment)\n- [NodeJS](https://nodejs.org/en/download) (for npm)\n\n### Installation\n\n1. Open Firefox profile directory in terminal.\n2. Clone this repo with the following command:\n\n```bash\ngit clone https://github.com/edelvarden/material-fox-updated.git chrome\ncd chrome\nnpm install\nnpm run dev\n```\n\nProject structure\n\n```plaintext\n[Profile Folder]\n└── chrome\n    ├── chrome\n    ├── src\n    │   ├── user-chrome\n    │   ├── user-content\n    │   ├── user-chrome.scss\n    │   └── user-content.scss\n    ├── package-lock.json\n    ├── package.json\n    ├── userChrome.css\n    └── userContent.css\n```\n\n3. Then you can modify the files in the `src` directory, all changes will be automatically build in the `[Profile Folder]/chrome/chrome` folder.\n\nTo subsequently start the development mode, just use the following command:\n\n```bash\nnpm run dev\n```\n\n## Credits\n\n- [MaterialFox](https://github.com/muckSponge/MaterialFox) by [muckSponge](https://github.com/muckSponge)\n- [edge-frfox](https://github.com/bmFtZQ/edge-frfox) by [bmFtZQ](https://github.com/bmFtZQ)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedelvarden%2Fmaterial-fox-updated","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedelvarden%2Fmaterial-fox-updated","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedelvarden%2Fmaterial-fox-updated/lists"}