Sweet_Pop! Beautify, Customize Firefox. Minimalist animated oneliner theme for Firefox perfectly matching Sweet Dark.
A minimalist animated oneliner theme for Firefox perfectly matching Sweet Dark
.
├── assets
│ └── preview images
├── css
│ ├── myChanges.css
│ ├── icons.css
│ ├── reddit.css
│ ├── discordCatppuccin.css
│ ├── responsiveNavbar.css
│ └── other .css files
├── icons
│ ├── animation.svg
│ └── many icons in .svg format
├── LICENSE
├── programs
│ ├── install-cfg.sh
│ ├── install-curl.sh
│ ├── install.sh
│ ├── install-curl.bat
│ ├── install.bat
│ ├── local-settings.js
│ ├── mozilla.cfg
│ └── user.js
├── README.md
├── script
│ ├── floatingToolbox.uc.js
│ └── hideScrollbar.uc.js
├── userChrome.css
├── userContent.css
└── utils
├── boot.jsm
└── chrome.manifest
userChrome.css
This helps to customize Firefox User Interface.
userContent.css
This helps to customize web content like a specific site.
floatingToolbox.css
Makes the toolbox float. Can be accessed via hovering over top of browser.
All imports are present in css
folder as well.
hideScrollbar.uc.js
It’s now possible to autohide scrollbars.
floatingToolbox.uc.js
Enable disable floating toolbox from menubar/about:config
.
navbarToolbarButtonSlider.uc.js
As this is a one-liner theme, one must drop some buttons to add sufficient space for urlbar and tabbar. That’s why I mentioned in issue 2 to move the add-ons to overflow menu. But this messed up with their widths. Take a look here. I did some temporary fix(which was not that good). But u/MotherStylus came up with an awesome uc.js
script.
So basically this adds a button slider to navbar toolbar. This is how it looks. Read the file description to configure it properly.
user.js
Contains required user preferences. Change these before copying it to it’s location because your default preferences will be overridden by this once you restart your browser.
Custom startup-script (aka mozilla.cfg
here) is loaded using local-settings.js
. This startup-script adds “loader” scripts from utils
folder that loads arbitrary javascript files from the script
folder into Firefox
mozilla.cfg
also helps in setting local webpage as your homepage. Details in Installation.
Note
Firefox team has removed XBL from Firefox starting with version 72, so userChrome.js would not work :/
Note
If you are planning to set a local page as home page then in
mozilla.cfg
, uncomment line12, 13, 14
and at line13
changenewTabURL_
to the local page location or any other URL.
Clone the repository and enter folder:
$ git clone https://github.com/PROxZIMA/Sweet-Pop.git && cd Sweet-Pop
Run installation script
This script will lookup default Firefox profile location and install the theme with default configurations.
$ ./programs/install.sh # Standard
$ ./programs/install.sh -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak
> programs\install.bat REM Standard
> programs\install.bat -e -b "C:\Program Files (x86)\Mozilla Firefox" REM Disable fx-autoconfig and Custom binary folder
-b <binary_folder>
optional
/usr/lib32/firefox
C:\Program Files\Mozilla Firefox
in windows-f <firefox_folder>
optional
~/.mozilla/icecat/
~/.mozilla/firefox/
in linux. %APPDATA%\Mozilla\Firefox
in windows-p <profile_name>
optional
4htgy4pu.app
profiles.ini
at ->[Install4F96D1932A9F858E]
Default=1yrah0xg.default-release
Locked=1
-e
optional
fx-autoconfig
mozilla.cfg
and local-settings.js
to Application Binary folder-h
optional
You can also install this theme with one command:
$ curl -s -o- https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.sh | bash # Standard
$ curl -s -o- https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.sh | bash -s -- -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak
> curl -sL "https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.bat" > %TEMP%\install-curl.bat && %TEMP%\install-curl.bat REM Standard
> curl -sL "https://raw.githubusercontent.com/PROxZIMA/Sweet-Pop/master/programs/install-curl.bat" > %TEMP%\install-curl.bat && %TEMP%\install-curl.bat -b "C:\Program Files (x86)\Mozilla Firefox" REM Custom binary folder
This will download the master branch and run the installation script.
mozilla.cfg
can be configured after complete installation
Open about:support
in new tab and click Open Directory
near Profile Directory
.
Open this directory in terminal and clone the repository
Note: If you already have a chrome
folder under Profile Directory
, rename it to chrome_bak
or anything else to preserve your old theme.
$ cd {Your profile directory}
$ git clone https://github.com/PROxZIMA/Sweet-Pop.git chrome
$ cd chrome
Install boot.jsm
file from fx-autoconfig in the chrome/utils
folder (make sure it matches above Folder Structure).
$ curl -sL "https://raw.githubusercontent.com/MrOtherGuy/fx-autoconfig/master/profile/chrome/utils/boot.jsm" > "utils/boot.jsm"
Move user.js
, mozilla.cfg
and local-settings.js
to their destination.
about:support
> Application Binary
> {Installation folder}firefox-bin
Installation folder
is /usr/lib/firefox/
$ ln -s "`pwd`/programs/user.js" ../user.js
$ cp ./programs/mozilla.cfg /usr/lib/firefox/
$ cp ./programs/local-settings.js /usr/lib/firefox/defaults/pref/
about:support
> Application Binary
> {Installation folder}firefox
Generally Installation folder
is /Applications/Firefox.app/Contents/MacOS/
(Firefox Nightly
for Nightly version)
For MacOS
, our destination folder is /Applications/Firefox.app/Contents/Resources/
$ ln -s "`pwd`/programs/user.js" ../user.js
$ cp ./programs/mozilla.cfg /Applications/Firefox.app/Contents/Resources/
$ cp ./programs/local-settings.js /Applications/Firefox.app/Contents/Resources/defaults/pref/
about:support
> Application Binary
> {Installation folder}firefox.exe
Installation folder
is C:\Program Files\Mozilla Firefox\
> mklink ..\user.js "%cd%\programs\user.js"
> copy .\programs\mozilla.cfg "C:\Program Files\Mozilla Firefox\"
> copy .\programs\local-settings.js "C:\Program Files\Mozilla Firefox\defaults\pref\"
Download navbarToolbarButtonSlider.uc.js
and place it in script
folder along with hideScrollbar.uc.js
.
$ curl -sL "https://raw.githubusercontent.com/aminomancer/uc.css.js/master/JS/navbarToolbarButtonSlider.uc.js" > "script/navbarToolbarButtonSlider.uc.js"
In Firefox
customize toolbar
disable Title Bar
, Drag Space
.Flexible Space
from urlbar.Compact/Normal/Touch
and Themes to Dark
or Light
(Compact
is buggy in Windows).Open about:support
> Clear startup cache...
> Restart
twice
programs/user.js
contains user preferences that are automatically loaded at startup. So no need to manually set them during installation
You can set any background in the toolbox. Edit --tabbar-gradient-color
in userChrome.css
to a static color or linear-background or any SVG ¯\_༼ •́ ͜ʖ •̀ ༽_/¯
.
You can change --tab-radius
and --tab-border-width
to increase/decrease tab border radius and width respectively to match normal
and touch
density.
Hide menu icons by commenting Line 9 in userChrome.css
.
You can disable any of the script/*.uc.js
from Toolbar Menu > Tools > userscripts > script
. Restart twice, every time you enable/disable the script.
You can also edit hideScrollbar.uc.js
to customize the scrollbars according to your taste.
For adding your own customizations make changes in myChanges.css
file under css
folder.
If something breaks on your system then please raise a issue
@ArataKamikaze mentioned in #5 that Firefox Color breaks/overwrite existing theme so disable the extension if you face similar issue.
I started with this amazing material theme : MaterialFox by muckSponge
One of the best dark theme for Firefox : ShadowFox by overdodactyl
Floating Toolbox : u/oldworlds
u/It_Was_The_Other_Guy helped me a lot on r/FirefoxCSS
Also this theme uses his fx-autoconfig
to load the javascripts files.
navbarToolbarButtonSlider.uc.js
script by u/MotherStylus adds button slider to navbar toolbar. More details here
Prism: A minimalist, beautiful startpage forked from Prismatic Night
Installation script details.
Made with ❤️