Make Firefox look like Safari

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).

License

  Dark Mode  

60-1.png

Firefox v74.0 – Dark mode
userChrome.css (v3.1.1)
userContent.css (v3.0.2-C)

Firefox ESR v68.6.0 – Dark mode
userChrome.css (v4.0.11)
userContent.css (v4.0.2-C)

  Light Mode  

60-2.png

Firefox v74.0 – Light mode
→ userChrome.css (v1.1.1)
userContent.css (v1.0.3-C)

Firefox ESR v68.6.0 – Light mode
userChrome.css (v2.0.11)
userContent.css (v2.0.3-C)

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).

60-1

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.

/* ================================================ */
/* >>>>>>    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.

60-3.png

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;
60-4.png
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 .

Etc.

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: 
/* >>>> ---------
...
#stop-reload-button{ 
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:

#stop-reload-button{  
transform: translateX(635px);

60-5.png

***        ***        ***

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;
#stop-reload-button{  
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.

60-6.png

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;
#stop-reload-button{  
transform: translateX(635px);

60-7.png

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.

60-8.jpg
My set-up on the 27″ iMac
60-9.jpg
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.

60-10.png

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.

60-11.png

Troubleshooting

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 either through the blog (link) or through Reddit (link).

Cheers.

Related:
• Getting started with userChrome.css

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