vinceliuice/whitesur-firefox-theme

Mac OS Safari theme for Firefox on Linux

Firefox Safari theme

A MacOSX Safari theme for Firefox 80+

This is a bunch of CSS code to make Firefox look closer to MacOSX Safari theme.

Based on https://github.com/rafaelmardojai/firefox-gnome-theme

Installation

Run the following commands in the terminal:

./install.sh

Usage: ./install.sh [OPTIONS...]

  -m, --monterey
   Install 'Monterey' theme for Firefox and connect it to the current Firefox profiles

  -a, --alt
   Install 'Monterey' theme alt version for Firefox and connect it to the current Firefox profiles

  -A, --adaptive
   Install Firefox adaptive color version...

  -e, --edit
   Edit 'WhiteSur' theme for Firefox settings and also connect the theme to the current Firefox profiles

  -r, --remove, --revert
   Remove themes, do the opposite things of install and connect

  -h, --help
   Show this help

if you want to edit the style then:

Run ./install.sh -e

if you want to use Monterey style then:

Run ./install.sh -m

if you want to use Monterey alt style then:

Run ./install.sh -a

MacOS and Windows version

AdamXweb - WhiteSurFirefoxThemeMacOS: https://github.com/AdamXweb/WhiteSurFirefoxThemeMacOS

Manual installation

1. Go to about:support in Firefox.
2. Application Basics > Profile Directory > Open Directory.
3. Copy chrome folder Firefox config folder.
4. If you are using Firefox 69+:
   1. Go to about:config in Firefox.
   2. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true.
5. Restart Firefox.
6. Open Firefox customization panel and:
   1. Use Title bar option to toggle CSD if is not set by default.
   2. Move the new tab button to headerbar.
   3. Select light or dark variants on theme switcher.
7. Be happy with your new gnomish Firefox.

Enabling optional features

Open userChrome.css with a text editor and follow instructions to enable extra features. Keep in mind this file might change in future versions and your configuration will be lost. You can copy the @imports you want to enable to a new file named customChrome directly in your chrome directory if you want it to survive updates. Remember all @imports must be at the top of the file, before other statements.

Known bugs

CSD have sharp corners

See upstream bug.

Wayland fix:

1. Go to the about:config page
2. Search for the layers.acceleration.force-enabled preference and set it to true.
3. Now restart Firefox, and it should look good!

X11 fix:

1. Go to the about:config page
2. Type mozilla.widget.use-argb-visuals
3. Set it as a boolean and click on the add button
4. Now restart Firefox, and it should look good!

Development

If you wanna mess around the styles and change something, you might find these things useful.

To use the Inspector to debug the UI, open the developer tools (F12) on any page, go to options, check both of those:

• Enable browser chrome and add-on debugging toolboxes
• Enable remote debugging

Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser UI.

whitesur-firefox-theme's Issues

Alt version still has the tab bar even after disabling it.

Is this the expected behavior?

[Bug] mkdir: cannot create directory ‘’: No such file or directory

Hi!

I get this, when I run ./install.sh -m:

Installing 'Monterey' Firefox theme...

mkdir: cannot create directory ‘’: No such file or directory

I tried running just ./install.sh as well, but same result.

not able to use the alt feature

i succesfully installed the theme onto firefox but i cant figure out how to use the monterey theme on it. Anybody can help?

Are there any plans to bring everything to windows or will just be for linux?

I know there is a version for windows, but it does not include monterey style or the alternative style.
Will there be a day that those will be available?

Readme file tutorial on how to install it is inaccurate

The steps to install this is missing steps.

Please update the readme file.

Enhancement idea: support for adaptive tabbar color addon

I found this add-on that I think would look great, especially with the monterey version of this theme.
https://github.com/easonwong-de/Adaptive-Tab-Bar-Color
Maybe as 3rd color option without fixed colors? The author also has a Safari-ish FF style but sadly no monterey version.

Minimize, Restore and Close buttons ..

Hello grandmaster, I have just a few caveats about functional design:

1 - I would like the functionality of hovering the mouse over it to affect only one button, that is, only the button I hovered the mouse over, when you hover the mouse over it and press the 3 buttons at the same time, it stays strange visually speaking. I'm using the Monterey theme.

Now it's like this:

I would like it to be like this for each button:

2 - The effect when you place the mouse over the Yellow(Minimize) and Red(Close) buttons is working perfect, it gives that expand effect .. Now the green(Restore) button does not work, the button does not expand, could you kindly check, I'm using the Monterey theme.

Yellow Button(expand effect) OK:

Red Button(expand effect) OK:

Green Button(expand effect) Failed: The button just stays the same, even with hover.

I don't know if this is on purpose, as it is a button that we hardly use, it has no expand functionality, while the other 2 buttons at the end have the expand function turned on. Please check if you can.

The Firefox theme is too beautiful, thank you for the great work and effort <3

Does it work with nightly ?

I tried on nightly, the tabs remained in the menubar for Monterey, for alt design they remained on top of the url .
Is it an issue in my side?

Thanks and regards,
Gabor

Personalization for Windows

Hello, I hope you are well
I had a question.
I have launched your theme in Windows and it is very attractive
But I wanted to use the Monterey style model, you said in the instructions that I should apply changes in the userChrome.css file, but I was a little confused about how to activate the Monterey style model.
Can you introduce me to a procedure?

request for monetery style for windows

please make a windows version..

Readme file tutorial on how to install it is inaccurate

The steps to install this is missing steps.

Please update the readme file.

This doesn't work.

line when autohide

Not really an issue and maybe not from your side.
I try to combine your theme with firefox-ui-fix. Latest releases for both.
I use the autohide option for bookmarkbar and tabbar but it keeps a line for each under the toolbar when hiding.
I didn't manage to find the part of your code which could produce that.
Maybe you could enlighten me?

How to remove theme

how can i remove theme?
it starts working very slow

Close button

I've set my buttons using Gnome Tweaks to be only Close at the left. It is like this in all windows except Firefox after applying this theme. Before the theme, it was placed correctly. Thank you.

install script doesnt work in new release

this is the error i get in german. In english, it's: "mkdir: the directory "" can't be created: No such file or directory"

I tried the old release and it worked for me. :)

URL Bar acting like titlebar

i'm having an issue where the url bar seems to also think its the titlebar, as in im able to grab and move the window by dragging it, and most annoyingly, i can't double click it to select text without maximizing or unmaximizing the window. im not sure if this is an issue with my KDE Plasma, but this only happens when i have the theme on

edit: for clarification, im using the monterey option

Changing inactive title buttons in customChrome.css doesn't work

I've managed to change the inactive title buttons (close/minimize/maximize) to be 'always on' (ie. never disappearing to grey) in the actual titlebutton-dark.css file, but if I try and copy the same code to my custom Chrome file, the icons disappear entirely. I've tried appending !important to the end of the url no-repeat, but it still doesn't show in my customChrome. Any insight would be much appreciated.

Search bar and tabs misaligned on Firefox 108.0.1

Search bar and tabs are misaligned. Had to uncomment 4th left header button, the 4th right header button and the 5th right header button in userChrome.css as the bar and tabs overlapped. That is solved, but they keep misaligned.

please make a windows version of the monetary style theme...please

please make a windows version of the monetary style theme...please....i will be very grateful...i love the theme bt cant use it on windows

How do I revert back to normal?

I don't want to uninstall and reinstall Firefox for this

Search Bar To Bottom

How can we send search bar to the bottom like old version?

Tabs are overlapping the search bar when not maximized

Hello,
as you can see in the screenshot below, the tabs are overlapping the search bar when firefox is not maximized.

When i maximize firefox, i dont have this issue. Either way, thank you for making this theme, looks really good!

Can not click new tab button when many tabs are openned

Resolved

No Dark/Light Theme Switching

Not sure it should switch automatically but, in any case, I can't find a way to manually switch between dark and light mode either.

Is there a button somewhere?

Firefox v113 breaks window buttons and tab bar's positions

With the recent update to Firefox, the browser has removed moz-box, which I assume is the cause of the broken positioning of the tabs list and the window buttons.

EDIT: The suggested fix on #18 works.

Installed but doesnt seem to affect firefox

Apologies I am quite new to linux but I installed as instructed with the monetary theme and it seems to have no effect at all? I tried the manual but I am unable to locate the chrome folder. I have also updated ubuntu and restarted many times.

nvm

Found da wey

Website favicons get removed when audio plays

Example of youtube video with audio playing

[Feature Request] Add support for LibreWolf install

How can I change tab bar height? I think on README.md screenshot it is smaller

Better Colors

The script works great and I am happy with how it looks. Would it be possible to somehow keep the layout the same and change the colors? I am using Monterey-Alt and even with dark mode, it is a little jarring.

Single tab doesn't show on alt-style, yet double padding exists

When there is just a single tab open in the browser it doesn't get displayed, however padding for it is retained, as if it did exist.

Can't make compact tabs work

I managed to get the Safari theme working by manually downloading the code from the /AdamXweb/WhiteSurFirefoxThemeMacOS/Github, but I can't get the compact tabs to work in this one here from vince.

All I did was copy and paste the chrome folder contents from the AdamXweb Github to get Safari UI working, but I don't know how to make this compact UI work from this specific github repo here (the one from Vince).

I also emailed Adam about something else, so please get back to me on that as well

Thanks!

dropdown menu scrolling issue

dropdown scrollbar doesnt work or have a alternative
it becomes a infinite unscrollable menu

Can't scrolling on select element in Firefox 113.0.2 (64-bit)

Video :
https://github.com/vinceliuice/WhiteSur-firefox-theme/assets/68785569/97937dee-e2cc-4561-872b-41569903b15d

When I rearrange the toolbar buttons, the address search bar and new tabs glitch and become sticked together

As the title says, when I use the Monterey version of the theme and try to rearrange the toolbar buttons, the address search bar and new tabs glitch and become sticked together, how can I solve? If I use the Big Sur version I don't have any problem at all.

Monterey mode not working

It just fails, and installs the WhiteSur theme.

How can I remove this theme?

How to have the Monterey style Firefox for Windows?

I know that I need to run some commands but can you explained more details how to use this. Big thanks.