safari firefox theme

Home > Tutorials

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

Firefox 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. There are many advantages to using Firefox . It’s open-sourced and focused on protecting user privacy with features like container tabs, and more powerful extensions. There are many other Firefox-exclusive features, but we’ll talk about just how customizable Firefox is. So much, by the way, 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 also make the browser behave like Safari, instead of Chrome. If you’re worried about having to write CSS code, don’t. Fortunately, many Firefox users freely share their CSS themes online. You only 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

Firefox allows such extensive customization 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 add 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.

• Open Firefox.
• Go to about:config using the address bar.
• Click I accept the risks when the warning dialogue pops up.
• toolkit.legacyUserProfileCustomizations.stylesheets

• 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 Firefox Safari theme we’re going to feature is made by vinceliuice . This theme is a part of his WhiteSur GTK theme for the GNOME and KDE Plasma desktops.

• WhiteSur GTK Theme

• Extract the downloaded ZIP file anywhere, preferably on the desktop.
• Open the extracted folder named WhiteSur-gtk-theme-master .
• Navigate to /src/other/firefox .
• Copy all the content, i.e. a folder named WhiteSur and two CSS files named userChrome.css and customChrome.css .
• Next, open Firefox.

• Here, create a new folder named Chrome then open it. If you already have a folder named Chrome, double-click on it to open it.

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

• Mozilla Firefox
• Web Browser

Safari Theme For Firefox Save

Make Firefox look more native on macOS. Light Mode / Dark Mode.

Safari Theme for Firefox

Make Firefox look native on macOS.

Switch between Light Mode and Dark Mode without editing CSS.

Installation

• Download this project with the green 'Clone or download' button above or here (zip)
• ☰ Menu > Help > Troubleshooting Information > Profile Folder: [Show...]
• Create a folder in your profile called chrome if it does not already exist
• Copy userChrome.css and lib into that new chrome folder
• Open about:config in the address bar
• Set the preference toolkit.legacyUserProfileCustomizations.stylesheets to true
• Restart Firefox
• Safari Adaptive Light
• Safari Adaptive Dark
• Add the extension Reload in address bar
• Re-arrange buttons to your preference
• Note that this allows quick access to theme selection (but doesn't show all if you've installed more than three)

Acknowledgements

Made possible with advice and code examples contributed by the community of reddit.com/r/FirefoxCSS , support.mozilla.org , forums.mozillazine.org . Files in lib are from MrOtherGuy/firefox-csshacks . Updated to be compatible with OSx Big Sur 11 and Firefox 88 by @floriandierickx and @gamunu .

Open Source Agenda Badge

From the blog.

How to Choose Which Programming Language to Learn First?

Sign in to osa.

• for Firefox
• Dictionaries & Language Packs
• Other Browser Sites
• Add-ons for Android

Safari - MacOS Monterey Light by notcat

MacOS Safari (Monterey) - Light theme for Firefox

Extension Metadata

Star rating saved

• Support Email
• See all versions

Thomas McMahon aka TwisterMc

Safari firefox theme.

• 20 Jan, 2005

I’ve been looking all over for a good Safari theme for Firefox and finally ran across one that has potential. Ran Aroussi has created a great Safari FireFox theme that has a lot going for it. Not only does it use the Safari buttons, it also adds in brushed metal. Granted it’s still under construction and there are a few issues, it looks really good. I’d use it more often if he could just the the find bug fixed. It seems when I hit apple+f the find bar pops up HUGE. Minor details though. 😉 Oh and it’s also good to note that this theme is Mac only. Sorry PC folks.

Posted In: Apple Firefox General Personal Software

2 Responses

• Pingbacks 1

That is quite interesting. Thanks!

New Safari Firefox Theme

A new Safari like Firefox theme as surfaced and it’s absolutely beautiful. Check out Aronnax’s Firefox themes and you’ll find GrApple (Brushed). Currently it’s only version 0.5 but it’s better than any other Safari type Firefox theme I’ve seen….

Leave a Reply Cancel reply

• Next Creation of MacThemes includes Me
• Previous Toy Story 3 Without Pixar
• Recent Posts
• Popular Posts

Can Can Wonderland – Arcade & Mini Golf

24 Apr, 2024

Ai Image Generation and Social Network – NightCafe

10 Mar, 2024

AI-Inspired Food Concoctions You’ve Never Imagined

2 Feb, 2024

How the Grinch Stole Hanukkah.

6 Dec, 2023

Halloween 2023

29 Oct, 2023

Second 5k and we are 3 minutes faster!

31 Jul, 2023

Good times on the farm.

7 Aug, 2023

WordPress Page Builder

Firefox WhiteSur theme

A MacOS & Windows Firefox theme to look more like Big Sur Safari. (For Firefox 70+)

Description

Aim is to make Firefox look more like MacOS Big Sur Safari. This is a CSS theme adapted to work on MacOS from the Linux GTK theme. Based on https://github.com/vinceliuice/WhiteSur-gtk-theme/tree/master/src/other/firefox (This is a quick modification, and is not written from scratch.)

Installation (MacOS)

Download the latest release , or clone the repo above. A script has been added to streamline the installation process. Open terminal in the directory of the repo, and run bash install.sh Follow the prompts

Installation flags

The script supports the following flags

• -c To enable close button on the left hand side
• -f To specify the default firefox folder (it will try to find the profile folder to place the theme within)
• -l Default location of most Linux installations
• -u Remove the animation on URL bar to be clickable throughout
• -n Removes the identity colour from tabs
• -r Remove the theme

e.g. To install with script, with close button left hand side: bash install.sh -c

Manual installation (MacOS & Windows)

Copy chrome and configuration folers into your Firefox Profile Directory

To find your Firefox Profile Directory you can:

• Go to about:support in Firefox.
• Application Basics > Profile Directory > Open Directory.
• Copy folders mentioned above into the profile folder. (usually has -release at the end).
• Go to about:config in Firefox.
• Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true .
• Restart Firefox.

Manual theme overrides:

To manually add a custom override, copy the *.css from the custom folder of whichever option you are after. Place it in the chrome/WhiteSur/parts foder within the profile directory you opened above. Next, import the .css file you just specified. To do this, open chrome/WhiteSur/theme.css in the same directory above and add the line @import "parts/NAMEOFOPTION.css"; above the line that says @namespace xul... That's it, the theme should load your overriden settings

Swap navbar close buttons on Windows:

windows-swapclose.css contains the styles required to swap the close buttons, as well as to re-order the close button from MacOS styling to Windows. Follow the directions above for the manual theme override to activate.

Manual colour override:

If it is a fresh install of Firefox, the script for MacOS should enable the settings automatically, however users who have toggled settings may need to do the about:config in step 4 above. If for any reason the WhiteSur theme doesn't activate after using the script, follow steps 4.1 and 4.2 to toggle the stylesheets from within the Firefox settings.

The tab background colour can be overwritten by themes installed through firefox extentions. e.g. if you are using a dark theme in light mode, tab backgrounds that are inactive are affected. Fix: Change the installed theme to appropriate colour scheme to avoid issues.

If you're looking to change the directory to run the script, you can always type bash then drag the file into terminal. You can also type cd and then drag the folder and press enter to navigate to the directory. Alternatively, if you're running Catalina, the default teminal is zsh, meaning you can change folders by typing the name to enter the folder e.g. WhiteSurFirefoxThemeMacOS

Q: "Why bother doing this, and not just use safari?" A: I've used safari for quite a few years, and was rather disappointed with the change in extensions, particularly with content blocking. This prompted me to use uBlock origin on Firefox, and to customise it to have the best aesthetics, and simplest transition.

If you've found a new bug, please report it as a new issue with the templates provided.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

firefox-theme

Here are 256 public repositories matching this topic..., black7375 / firefox-ui-fix.

🦊 I respect proton UI and aim to improve it.

• Updated Jun 19, 2024

migueravila / SimpleFox

🦊 A Userstyle theme for Firefox minimalist and Keyboard centered.

• Updated Apr 24, 2022

cascadefox / cascade

A responsive One-Line CSS Theme for Firefox.

• Updated Feb 12, 2024

datguypiko / Firefox-Mod-Blur

Firefox Theme - For dark theme lovers / More compact / Modular / Blur

• Updated Jun 17, 2024

QNetITQ / WaveFox

Firefox CSS Theme/Style for manual customization

• Updated Jun 18, 2024

eromatiya / blurredfox

A sleek, modern and elegant Firefox CSS theme

• Updated Jun 27, 2023

Godiesc / firefox-gx

Opera GX Skin for Firefox

• Updated Jun 25, 2024

betterbrowser / arcfox

Make firefox flow like arc

• Updated Jun 8, 2024

KiKaraage / ArcWTF

A userChrome.css theme to bring Arc Browser look from Windows to Firefox. No waitlist, no registration needed ✨

• Updated Jun 24, 2024

wilfredwee / photon-australis

Bringing sexy curves back to Firefox Photon.

• Updated Dec 13, 2023

AdamXweb / WhiteSurFirefoxThemeMacOS

MacOS Big Sur like theme for Firefox on MacOS & Windows. Make your Firefox look like Safari.

• Updated Nov 1, 2023

catppuccin / firefox

🦊 Soothing pastel theme for Firefox

• Updated Jul 18, 2023

Zonnev / elementaryos-firefox-theme

This theme for Firefox supports all the window buttons layouts from Tweaks and it blends into the elementary OS user interface.

• Updated Apr 11, 2024

Guerra24 / Firefox-UWP-Style

Sun Valley + MDL2 Theme for Firefox

• Updated May 16, 2024

christorange / VerticalFox

Firefox theme with Edge like auto-hide vertical tab bar and minimalism design. Powerd by Sidebery.

• Updated Jun 21, 2024

Shina-SG / Shina-Fox

A Minimal, Cozy, Vertical Optimized Firefox Theme

• Updated May 24, 2024

soulhotel / FF-ULTIMA

Native Vertical Tabs, keep your sidebar, no extensions needed. No overthinking. FF Ultima.

• Updated Jun 26, 2024

crambaud / waterfall

A mouse-friendly clone of the Cascade custom CSS theme for Firefox.

• Updated Aug 2, 2022

sameemul-haque / dotfiles

✨ Hyprland + Waybar with Catppuccin theme • Arch Linux

• Updated Jun 20, 2024

PROxZIMA / Sweet-Pop

Sweet_Pop! Beautify, Customize Firefox. Minimalist animated oneliner theme for Firefox perfectly matching Sweet Dark.

• Updated Mar 25, 2023

Improve this page

Add a description, image, and links to the firefox-theme topic page so that developers can more easily learn about it.

Curate this topic

Add this topic to your repo

To associate your repository with the firefox-theme topic, visit your repo's landing page and select "manage topics."