denizjcan / firefox-safari-15-theme

A Firefox theme that emulates the Safari 15 interface and new tab page

Firefox 'Safari 15' Theme with Adaptive Colors and New Tab Page

A Firefox theme that emulates the Safari 15 interface and new tab page.

✨ (NEW) ✨ Adaptive color theme similar to Mica effect added. Please see "Step 2, Adaptive Theme" for details.

Step 1 - How to install Safari 15 theme:

Download: https://github.com/denizjcan/Firefox-Safari-15-Theme/releases/

1. Type `about:config` in your adress bar and accept the risk prompt to continue.
 	
2. Search `toolkit.legacyUserProfileCustomizations.stylesheets` and double click to set the value to "true"

3. Type `about:support` in your adress bar.

4. Find `Profile Directory` and click `Open Directory`.

5. Create a folder called `chrome` (without apostrophe).

6. Paste `userChrome.css & window` in "Firefox Safari 15 Adaptive" or "Firefox Safari 15 Regular" folder to chrome folder.
You can check 'Step 2 - color Themes' to choose.

7. Restart Firefox.

Now follow step 2

---

Step 2 - Color Themes:

A) ✨[NEW]✨ Adaptive Color Theme (Like Mica Effect):

Theme that changes color automatically according to your WALLPAPER and system light/dark mode.

Move the contents of the "Firefox Safari 15 Wallpaper Adaptive Colors" folder into the chrome folder.

Important:

• Make the system colors (accent colors) "automatic" in the Windows Settings.
  _{Windows settings>Personalisation>Theme color>select "Automatic"}
• Select "System theme - automatic" from Firefox native themes.
  _{Firefox settings>Add-ons and Themes>Themes>select "System theme-automatic"}
  

adaptive.mov

Important: This is not the Mica effect. The Mica effect is incompatible with the close/min/max buttons on the left, so it mimics Mica colors (based on OSX saturation), but the colors are solid.

B) Adaptive Theme 2 (According to the currently open web page):

Move the contents of the "Firefox Safari 15 Original Theme" folder into the chrome folder.

I recommend using "Adaptive Tab Bar Color" add-on in combination with "Darkreader" add-on.

• Adaptive Tab Bar Color: Firefox theme colors change according to the website you are on, as in Safari.
  Click here to download
• DarkReader: Firefox theme colors (need Adaptive Tab Bar Color to work) and websites automatically switch to dark mode.
  Click here to download

Adaptive.Colors.and.Dark.Mode.mov

C) Fixed dark/light Theme:

Move the contents of the "Firefox Safari 15 Original Theme" folder into the chrome folder.

Install these themes to get the correct Safari colors:

• Dark Mode: https://addons.mozilla.org/en-US/firefox/addon/safari-ventura-dark/
• Light Mode: https://addons.mozilla.org/en-US/firefox/addon/safari-ventura-light/

Then install "automaticDark" addon to automatically switch between two themes and set it like this:

---

3) How to set-up Safari 15 New Tab Page:

Tutorial Video: https://drive.google.com/file/d/1BcFr5fgouuSwQ-e7icRSdUYI-DvcGiG_/view?usp=share_link

This theme is based on Oneline Proton, check it out too <3 :

https://github.com/newmanls/OnelineProton

firefox-safari-15-theme's Issues

Tabs and caption buttons decentered

I downloaded the latest version of the theme but the tabs and caption buttons are in the wrong spots.

The button is not on the center of the header button

Firefox version 109.

It seems the new version of the Firefox will let the tab/urlbar/icon button will not center of the the header bar.
Is there any method to ensure all the button can be center of the header bar.
Otherwise, if the firefox change the height of header bar, we need re-tunning the height of each parameter.

not working after latest firefox update

please update thank you

Reposition Navbar and hide extensions symbol

Hi

is it possible to somehow place the navbar right of the tabs without changing the backward, forward and sidebar symbols positions? Whenever I tried this, everything was dragged right and the tabs went all the way beneath the close buttons.

Also if it was possible i would like a feature where you can hide the extensions symbol, since it can be found in the panel button and i want to keep the toolbar as empty as possible to have more room for tabs and less distractions.

thanks for your great looking theme.

Place urlbar inside titlebar of active tab

Is there any chance how the UserChrome.css file can be edited so that the urlbar is placed directly inside the tab label as is the case with safari's compact Tab layout?

Please update this theme to work with Firefox v113

Please update this theme to work with Firefox v113

Theme is broken

not working with latest updates

any chance at an update to this awesome theme?

How to fix close bar?

Thanks for theme is very beautiful. But I got following error. How to fix it?

How to adjust URL bar size?

As the title suggests - how do i adjust the URL bar size to make it bigger as well as the search results that pop out when the URL bar is clicked as shown below -

Title bar padding and positioning is off

On mac with a completely fresh Firefox install, the titlebar's placement and padding is off.

The close buttom is not on the left handside after zoom to full screen

As title. When we zoom the firefox to full screen, the close bar will change the position to central. Can we fixed this issue ?

extend plugin icon cannot be remove

Hi Developer,

My firefox have updated to the following version. I have encounter the issue about the extend icons cannot remove.

The extend plugin icon is on the following location. Is there method to remove this icon or move this icon to other place to have better user experience.

the navigation button and urlbar aren't perfectly aligned

the urlbar is under tabs and nav buttons are close to close buttons

Download button clashes with mozilla pocket button

The Safari 15 support mica theme on windows

Can we have the mica theme support on the Firefox-Safari-15-Theme ?

By the way. The Safari 15 tab have support the tab with color. Will you plan to enable this feature on Firefox-Safari-15-Theme ?

Is it possible to change theme based on website like safari?

Safari has this thing when you go to a website it adapts the theme to the website. It'd be cool if we can replicate that behaviour in Firefox.

Please Read Me: Theme Updates and Troubleshooting

First of all, thank you very much to everyone who downloaded and loved my theme. Although it was the first theme I made, I received many positive feedback. Thank you 😊

However, for an indefinite period of time, I will not be able to access the computer for personal reasons. So updates and troubleshooting will be delayed, sorry 🫤

Fix the order of traffic-light buttons

Download and unzip the file, move UserChrome.css into FireFox Profile Folder then Restart FireFox!
UserChrome.css

The Firefox-safari-15 cannot support firfox version 113

as titile