macOS Native-looking Translucent Tabbar for Firefox (126+)

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.

⚠️ Note: this tweak will only work on macOS versions of Firefox.

How to apply

1. Go to about:support in URL bar. Look for "Profile Folder" then click "Show In Finder" button to open the profile folder.
2. Create a new folder named chrome.
3. Create a new blank file named userChrome.css
4. Copy-and-paste the code included in the macos-native-tabbar.css file.
5. Go to about:config on your URL bar, search for toolkit.legacyUserProfileCustomizations.stylesheets and make sure it's set to true (double-click the value to change).
6. Starting from Firefox 126 and above, you also need set widget.macos.titlebar-blend-mode.behind-window as true. (Thanks @emilio! #11)
7. Give Firefox a restart and transparency should work again.

For a more thorough guide on using userChrome.css, please refer to this wonderful guide at userchrome.org.

See also

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!

License

MIT License