Replaces default Firefox black-and-white theme with a more native-looking light/dark compatible translucent tabbar. You need to set your theme to "Default" for this tweak to properly work. Works best if you set your system appearance to "Auto" (changing light/dark automatically), then Firefox will follow the OS settings for color scheme.
Finally this day has come... where you no longer need custom CSS to apply translucent tab bars, as the newest version of Firefox now has a built-in support for macOS native translucent tab bars. You just need to turn the hidden options. Here's how:
- Go to
about:configon your URL bar, search for below two values set them totrue(double-click the value to change).widget.macos.titlebar-blend-mode.behind-windowbrowser.theme.macos.native-theme
- Give Firefox a restart and your tab bar should turn translucent.
(Thanks @la3rence for the tip #12)
- Go to
about:supportin URL bar. Look for "Profile Folder" then click "Show In Finder" button to open the profile folder. - Create a new folder named
chrome. - Create a new blank file named
userChrome.css - Copy-and-paste the code included in the
macos-native-tabbar.cssfile. - Go to
about:configon your URL bar, search fortoolkit.legacyUserProfileCustomizations.stylesheetsand make sure it's set totrue(double-click the value to change). - Starting from Firefox 126 and above, you also need set
widget.macos.titlebar-blend-mode.behind-windowastrue. (Thanks @emilio! #11) - Give Firefox a restart and your tab bar should turn translucent.
For a more thorough guide on using userChrome.css, please refer to this wonderful guide at userchrome.org.
Firefox Sliding Bookmarks Bar - Tuck in the bookmarks bar under toolbar to make it slide out only on mouse hover. Makes your firefox cleaner & minimal!
MIT License