Make Firefox look like Safari

Note 1: starting from June 2020 I will only maintain the files for Firefox ESR. The files releated to “normal” Firefox (aka the Rapid Release version) have been discontinued, because the megabar 🤮 fiasco clearly showed that all users except the ESR ones are beta testers, and I have no interest in being too close to all drama created by the incompetence of the Mozilla management 💩.

Note 2: make sure to get also the relevant userContent.css file since it greatly improves the overall experience.

Note 3: in the userContent.css you can now change the background of add-on menus to match your theme, and the relevant instructions are within the userContent file itself.

Note 4: at the moment there are two little regressions which I didn’t manage yet to fix: lateral scrollbutton shadows (mainly relevant to Light Mode); background of text fields in Edit Bookmark and Library (mainly relevant to Dark Mode, and quite possibly macOS specific). If you manage to fix any of them, please send me the relevant code and I will update the master files.

***        ***        ***

Here are the files I created to make Firefox look like Safari.

I have already updated each release a few times, so I would suggest you come back here every now and then to check if the version you are using has been updated.

There are some Pro Tips and some Troubleshooting info at the bottom, and if you are not familiar with userChrome.css and userContent.css yet, I wrote a little guide to get you started (see here).


  Dark Mode  


Firefox ESR v78.3.1 – Dark mode
userChrome.css (v4.1.3) (updated 04-Oct-2020)
userContent.css (v4.1.2-C) (updated 04-Oct-2020)

Archive: Firefox ESR v68.9.0 – Dark mode
userChrome.css (v4.0.15)

  Light Mode  


Firefox ESR v78.3.0 – Light mode
userChrome.css (v2.1.2) (updated 29-Sep-2020)
userContent.css (v2.1.1-C) (updated 29-Sep-2020)

Archive: Firefox ESR v68.9.0 – Light mode
userChrome.css (v2.0.12)

Pro Tips

The userChrome files are intended to work out of the box for a variety of users with different width of the Firefox window.

This means that, whether you are using Firefox on a 13″ laptop or full-screen on a 27″ screen, both the URL bar and the items in the Bookmark Toolbar are going to be centred (assuming that you don’t have any other button except the Option Menu in the Toolbar – otherwise keep reading).


Still, you may want to further customise the userChrome.css for your screen layout, and at the very beginning of each userChrome file there is an easy-to-modify section which lets you do so.

But before you start modifying userChrome.css, make sure to remove any Flexible Space from the nav bar. Right-click somewhere on the top and select Customise…

Firefox CSS 16.png

In the picture below, the rectangular shape next to the back/forward buttons is called Flexible Space, and it’s something used at mainstream level to modify the nav bar.

Firefox CSS 17.png

Since we are at pro level here, get rid of all the flexible spaces by dragging them away from the nav bar and click Done. Then, open userChrome.css and go to this section:

/* ================================================ */
/* >>>>>>    OPTIONAL USER CUSTOMIZATION      <<<<< */
/* ================================================ */

This is what can be easily customized in that section:

● Toolbar buttons
● Reload button
● Min width/height of Firefox window
● Colour of Add-on buttons (Dark Mode only)

Toolbar buttons

Let’s say you have added some buttons in the toolbar on the right-hand side of the URL bar, next to the Option Menu.


In the above example two buttons were added (add-ons, overflow menu) and as a result the URL bar is no longer centred. Worry not my friend.

Look for this code at the beginning of the userChrome file:

/* >>>> ---------
/* >>>> STEP 1: 
/* >>>> ---------
#urlbar-container {
padding-left: 0px !important;

Remove the 0 and add 29px per each button you added on the right-hand side of the URL bar. Then save the file and re-launch Firefox to have the change taken into account by Firefox.

In my case I added two buttons, and as such the code became:

padding-left: 58px !important;
URL bar centred once again

If you added some buttons on the right-hand side and some on the left-hand side of the URL bar, just compute the number of pixels to add with this formula:

px =
+29 x (n° buttons on the right-hand side)
-29 x (n° buttons on the left-hand side)

If you added two buttons on the right-hand side and two buttons on the left-hand side, then you don’t need to do anything and you can leave the  0px  as it is.

If you added two on the right-hand side and one on the left-hand side, the number to put is  29px .


Reload button

Once you are happy with the configuration of the buttons, you can move the reload button somewhere else in the nav bar.

Look for this code at the beginning of the userChrome file:

/* >>>> ---------
/* >>>>  STEP 2: 
/* >>>> ---------
transform: translateX(20px); 

Change the  (20px)  to reach the configuration of your preference.

I personally like to have the reload button just outside the right end of the URL bar, and with the window size of the example the code which works is:

transform: translateX(635px);


***        ***        ***

This is the code which works in the example above with two buttons next to the Menu and the reload button right next to the URL bar.

#urlbar-container {
padding-left: 58px !important;
transform: translateX(635px);

Let’s say that I now add a button on the left-hand side of the URL bar: the URL bar moves as a result, and the configuration no longer works.


To fix that I’m going to decrease the URL bar padding by 29px, and without doing anything to the reload button, the configuration goes back in place.

#urlbar-container {
padding-left: 29px !important;
transform: translateX(635px);


Window width

If you reduce the width of the Firefox window after you have made the above changes, the URL bar will remain centred but the Reload button will not “follow” the URL bar.

You can prevent this from happening by locating this code at the beginning of the userChrome file:

/* >>>> ----------
/* >>>>  STEP 3: 
/* >>>> ----------
#main-window {
min-width: 900px !important;

You can then change it by selecting the right number of px for your configuration of preference, just be aware that doing so may affect fingerprinting resistance.

Thanks to the new code, you can no longer reduce the width of the Firefox window with your mouse, and as such your customisation will remain effective at all times.

My set-up on the 27″ iMac
I actually use the Light Mode
Colours of Add-on buttons (Dark Mode only)

Out of the box, the Add-on buttons in the Toolbar and in the Overflow Menu won’t have their original colour, but rather will be black and white.


Should you wish to use the original colours instead, or just a lighter grey filter, locate this code at the beginning of the userChrome file:

/* >>>> ----------
/* >>>>  STEP 4:
/* >>>> ----------
#nav-bar .toolbarbutton-1:not(:-moz-any([type="menu-button"], 
#nav-bar-overflow-button)) {
filter: grayscale(100%) !important; 
.widget-overflow-list .toolbarbutton-icon {
filter: grayscale(100%) !important; 

Either comment those lines (by adding a  *  at the very beginning of each line) or reduce the  (100%)  to display some colour.



Starting from Firefox v69, userChrome.css and userContent.css are no longer loaded by default when you launch Firefox. To change that and keep using your customization, you need to type about:config in the URL bar and then set toolkit.legacyUserProfileCustomizations.stylesheets to true.

If the CSS files still don’t work after setting that pref, make sure that you are running the latest version of Firefox to match the version the above files were written for (if you use Firefox BetaDeveloper and Nightlythe userChrome.css most likely won’t work spotlessly there).

If after doing all that the CSS files still don’t work for you, feel free to contact me.


• Getting started with userChrome.css

***        ***        ***

Important note Firefox v77

Mozilla has been trying really hard to transform itself into a pointless and patronizing corporate entity, completely oblivious to the feedback from its users and driven instead by whichever the latest fashion in terms of managerial nonsense is.

A clear sign that the top person is both incompetent and affected by the “visionary complex”, meaning that he/she would like to play the part of the visionary (e.g. Steve Jobs) but clearly lacks the skills. And in turns this means that, when the latest “visionary” feature is introduced but the reaction from the users is overtly negative, the option to disable that feature gets removed and the feature is just forced upon the users.

This is what happened with the megabar 🤮. Firefox 77 has just been released, and the process to get rid of that pointless thing has become overly complex. It’s still possible to do it via CSS, sort of, but the end result is subpar. It’s no longer possible to disable it in about:config, and this is a clear sign of the patronizing horror Mozilla has become (they are catching up with Apple and its subpar iOS in terms of being patronizing).

I have now uninstalled Firefox, keeping only Firefox ESR for the time being, which is based on v68. If one day this patronizing attitude displayed by Mozilla reaches also the ESR version, oh well that one will go as well and I’ll migrate to a different browser.

The files listed above for v74 work flawlessly up to v76, but not in the latest v77 because of the megabar 🤮 problem. Feel free to switch to ESR instead, since the entire CSS still works wonderfully there. And if you don’t want to use the ESR version, just switch to a different browser.

Fact is, not updating the browser can be a security risk, hence you should not remain in v76 just to avoid the megabar 🤮 (if you are wondering, the ESR version is based on v68 but still gets all the latest security updates).

Note Firefox v75

Mozilla has this childish and annoying attitude of introducing pointless things into Firefox just for the sake of it, embracing a tickbox and job-creation mentality which resembles quite closely corporate dynamics.

Problem is though, Mozilla is not a corporation. Rather, it is a non-for profit organization supported by a wide community of volunteers, and as such you would not expect any resemblance to said tickbox and job-creation corporate mentality.

Or maybe their actions are just driven by a childish approach to product development, who knows…

Anyway, in v75 a pointless and irritating “megabar” has been introduced. Feel free to go in about:config and change these prefs to get rid of it:

urlbar.megabar => false
urlbar.update1 => false

The userChrome then starts working as normal. I use the ESR so I have not noticed any other parts of the code breaking, but if something else requires attention please let me know.


Read also:
• How to back up Bitwarden using KeyPassXC on macOS
• How to change login screen wallpaper on macOS Catalina