This is a personalized fork of Firefox Mod-Blur, and my take on the VSCode Night Owl theme.
The project uses Firefox Mod-Blur as the base structure, and have been modified (thanks to the codes from uc.css.js) to extend its customization capabilities to many parts of the internal system. Although the color scheme takes inspiration from the Night Owl theme, I only use a selected number of main colors that I like from Night Owl for this project to create a more coherent look.
About the extra `userChrome.css` and `userContent.css` files
The main files for customizing Firefox are userChrome.css and userContent.css, but you'll see that there are also userChrome_main.css, userChrome_sub.css, userContent_main.css, userContent_sub.css. The reason for this is that in the upstream repo, all of the main config codes are written directly in the userChrome.css and userContent.css files; this makes it really hard to add your own customization because all the custom files are imported at the head of the file, so if you want to make a change you'll to directly modify the content of the file, and that makes it hard to merge changes from upstream if you change it extensively. So I break userChrome.css into userChrome_main.css and userChrome_sub.css where userChrome_sub.css contains everything from userChrome.css without importing any extra files; that instead is done in userChrome_main.css where it imports userChrome_sub.css as the first file, then imports all the extra custom files. That way, all the custom changes can be written in the custom files that come after and it will overwrite the codes in the original files without having to directly modify it, and the original userChrome.css can be kept to pull changes from upstream. The same is applied to userContent.css. Until the upstream repo changes its approach to file structure, I think this is the best way to go about it.
The only main config files you need are userChrome_main.css, userChrome_sub.css, userContent_main.css, userContent_sub.css; once you copy these files to your chrome folder, userChrome_main.css and userContent_main.css should be renamed to userChrome.css and userContent.css.
95% of the customizing comes from the CSS files, the rest are from the use of JavaScript to further extend the capability, most notably the custom Findbar from uc.css.js. Using JavaScript files is totally optional.
As mentioned this is a personalized fork, so although much of the codes from Firefox Mod-Blur is the same, I changed and removed many things that I don't use to keep the code streamlined for me, most significantly the support for vertical tabbar, and several other mods. I advise you to check the original Firefox Mod-Blur to see its full capability, and check the commit history of this project to see exactly what was changed/removed.
Many thanks to Firefox-Mod-Blur, on which this entire project is based on, and many thanks to uc.css.js for being a great source of information on how to config the internal system of Firefox. I also want to note FF-ULTIMA, a really cool looking project and helped me with minor tweaks here and there.
If you are unfamiliar with customizing Firefox, I strongly advise you to look up what userChrome.css, userContent.css and user.js files are and what they do. https://www.userchrome.org/ is a good resource for that.
- Enable Firefox to use customization files: Either copy my
user.jsfile into your Profile folder, or enable it throughabout:config
- Option A. Copy
user.js, if you also want to use my settings:- Enter
about:profilesinto your URL/searchbar. Locate the profile you are currently using, which will most likely be nameddefaultordefault-release. The correct one won't have theSet as default profilebutton. - In the row for Root Directory, press the
Open Folderbutton. It will bring up the folder for your profile, copy and paste theuser.jsfile into that folder. Restart Firefox and run once to copy the changes fromuser.jstopref.js, then you can delete theuser.jsfile.
- Enter
- Option B. Change through
about:config: Enterabout:configinto your URL/searchbar, then search fortoolkit.legacyUserProfileCustomizations.stylesheetsand set it totrue.
- Copy the customization files: Follow the steps in Step 1 with
user.jsto locate to your Profile folder. In your Profile folder, create a new folder namedchrome. In the newchromefolder, copy and paste there the filesuserChrome_main.css,userChrome_sub.css,userContent_main.css,userContent_sub.css, as well as the folderASSETS. - Rename the files
userChrome_main.cssanduserContent_main.csstouserChrome.cssanduserContent.css. - Using extra mods: Copy the
.cssfiles from the folders of the mods you want to use into thechromefolder. Some mods have specific instructions, so make sure to check theREADMEfiles in those folder before use. TheuserChrome_main.cssonly imports the extra mods that I currently use, so you'll want to modify it for your personal use. - To use JavaScript files, check the README file in the JavaScript folder.
- To use the Night Owl theme, copy the
.cssfiles from the Night-Owl folder into yourchromefolder.
- https://www.userchrome.org/ : A good resource on
userChrome.cssand configuring Firefox. - https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/ : Guide to enable the Browser Toolbox in Firefox and also disable Popup Autohide so you can inspect elements of the Firefox browser itself.
- https://firefoxcss-store.github.io/ : A collection of builds and configs from the Firefoxcss community on Reddit and on Lemmy.
- https://github.com/aminomancer/uc.css.js/ : Many good codes/information on configuring the internal Firefox system. The owner/maintainer is a developer from Firefox, and many of his comments in r/Firefoxcss have been extremely informative.
- The owl icon is from G-CAT
- The font is CommitMono Nerd Font: https://www.nerdfonts.com/font-downloads