About this theme

Unfortunately, I don't know why, the awesome Firefox GNOME theme by Rafael Mardojai (https://github.com/rafaelmardojai/firefox-gnome-theme) doesn't work for me. Therefore I decided to create my own GNOME Light Theme with Firefox Color (https://color.firefox.com/).

Tested with

For the best experience you need to create a separate file for CSS and remove Firefox' title bar

Remove title bar:

Create a userChrome.css file:

Go with Firefox to about:config and find the preference toolkit.legacyUserProfileCustomizations.stylesheets set it to true. BE CAREFUL! This preference is required to load the custom CSS in Firefox.
Find your Profile and create a folder named chrome
Quit Firefox
Create a new text file inside the chrome folder named userChrome.css
Edit userChrome.css with your text editor and paste this code:
.titlebar-button{ list-style-image: none !important; appearance: none !important; } .titlebar-button > .toolbarbutton-icon{ appearance: auto !important; background: none !important; width: unset !important; height: unset !important; } .titlebar-min { appearance: auto !important; -moz-default-appearance: -moz-window-button-minimize !important; } .titlebar-max { appearance: auto !important; -moz-default-appearance: -moz-window-button-maximize !important; } .titlebar-restore { appearance: auto !important; -moz-default-appearance: -moz-window-button-restore !important; } .titlebar-close { appearance: auto !important; -moz-default-appearance: -moz-window-button-close !important; } .tab-background{ outline: none !important; box-shadow: none !important; }
Save the file
Restart Firefox

Rate your experience