To use these website themes in Firefox-based browsers (like FloorP or Firefox), you must enable custom stylesheets and set up a chrome directory within your profile.
1. Enable Custom Stylesheets
- Navigate to
about:config in your browser. - Set
toolkit.legacyUserProfileCustomizations.stylesheets to true.
2. Prepare the Profile Directory
- Go to
about:support. - Under Application Basics, find Profile Directory and click Open Directory.
- Create a folder named
chrome inside your profile directory. - Inside
chrome, create a folder named websites.
3. Integrate with Matugen
Copy the template from the repository's templates/firefox-colors.css and add it to your matugen configuration. Ensure you use absolute paths (e.g., /home/user/...) rather than relative paths (~/...), as relative paths will fail to import.
[templates.firefox-website-colors]
input_path = "path/to/template/"
output_path = "/home/username/path/to/profile/chrome/colors.css"
4. Apply Themes via userContent.css
- Copy the desired website themes from the
websites/ directory of this repository into your chrome/websites/ folder. - Create a file named
userContent.css inside your chrome/ folder. - Import the generated colors and the specific website themes using
@import rules with absolute paths.
/* Example userContent.css */
@import url("/home/ini/.floorp/ini/chrome/colors.css");
@import url("/home/ini/.floorp/ini/chrome/websites/bitwarden.css");
@import url("/home/ini/.floorp/ini/chrome/websites/github.css");
@import url("/home/ini/.floorp/ini/chrome/websites/youtube.css");