Skip to content

denizjcan/Firefox-Safari-15-Theme

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 

Repository files navigation

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.

safarifirefox(1)

Step 1 - How to install Safari 15 theme:

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

seperator

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

seperator

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:

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


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