Make Firefox Look Like Safari from macOS Big Sur with WhiteSur Theme

Remember Firefox? The web browser that made it cool to ditch Internet Explorer before Chrome took the crown? It’s still around, although it has fallen from grace, and it has fallen hard. This is not because Firefox is not in the same competitive league as Chrome by the way. There are many advantages to using Firefox. It’s open-sourced, focused on protecting user privacy with features like container tabs, and more powerful extensions. There are many other Firefox exclusive features, but we’re not going to go there. Because we want to talk about just how customizable Firefox is. So much, by the way, that you can make Firefox look like Safari from macOS Big Sur too.

That includes things like tabs below the address bar and hiding the tab bar when only one tab is open.  Just to be clear, we’re not talking about the regular browser themes here that Chromium-based browsers have too. This is the real thing, with custom CSS that completely changes the look and feel of the browser. Not only that, users can make the browser behave like Safari, instead of Chrome. If you’re worried about having to write CSS code, don’t. Fortunately, there are many Firefox users who freely share their CSS themes online. You simply have to download it, place some files in the right folder, and you are good to go.

We shared a detailed tutorial describing the easy ways to save web pages as PDF on desktop and mobile browsers a while ago. Please check that out as well.

Enable userChrome.css Customization in Firefox

The way Firefox allows such extensive customization is through a CSS file called userChrome.css. You can edit this file to move the tab bar below the navigation toolbar, view multiple rows on your bookmarks toolbar, etc. Since this file is separate from Firefox’s original files you can always delete the file to switch Firefox back to the way it was. To be clear, you can’t really add any more features but only modify the layout of the features and elements already in Firefox. But first, you have to enable userChrome.css in Firefox.

1. Open Firefox.
2. Go to about:config using the address bar.
3. Click on I accept the risks when the warning dialogue pops up.
4. Type or copy and paste the following in the search bar on this page.
   • toolkit.legacyUserProfileCustomizations.stylesheets
5. Double-click on the search result to enable it by changing the value from false to true.
6. You can also similarly enable these optional features that you may need for some themes.
   • layers.acceleration.force-enabled
   • gfx.webrender.all
   • gfx.webrender.enabled
   • layout.css.backdrop-filter.enabled
   • svg.context-properties.content.enabled

Make Firefox Look Like Safari with WhiteSur Theme

The particular Firefox Safari theme we’re going to feature here is made by vinceliuice. This theme is a part of his WhiteSur GTK theme for the GNOME and KDE Plasma desktops.

1. Visit the WhiteSur GTK theme on GitHub using the link below and click on the green button that says Code.
   • WhiteSur GTK Theme
2. Select Download ZIP from the drop-down menu.
3. Extract the downloaded ZIP file anywhere, preferably on the desktop.
4. Open the extracted folder named WhiteSur-gtk-theme-master.
5. Navigate to /src/other/firefox.
6. Copy all the content, i.e. a folder named WhiteSur and two CSS files named userChrome.css and customChrome.css.
7. Next, open Firefox.
8. Click on the Firefox hamburger menu and go to Help > Troubleshooting Information. On newer versions of Firefox this may be labeled as More Troubleshooting Information.
9. Click on the Open Folder button next to the Profile Folder label.
10. Here, create a new folder named chrome then open it. If you already have a folder named chrome, just double-click on it to open it.
11. Paste the copied files and folder from the WhiteSur-gtk-theme-master folder inside the chrome folder.
12. When you’re done, restart Firefox.

When Firefox starts up again you will still have Firefox but with Safari’s clothing. Firefox is the only major web browser today that is not using Chromium as its base. It’s the one browser standing between a complete Chromium monopoly. Seeing the ever-decreasing market share though, we’re not sure how long can the browser stay around. Again, that in no way means Firefox is a bad browser. So, make the best of it while you can. You can find more Firefox CSS themes on the r/FirefoxCSS Subreddit. Moreover, you should also try these privacy extensions for Firefox.