ShyFox

A theme for Firefox that makes it something similar to Arc, but still has its own vision

Showcase

GIF

Window Fullscreen

Install

Download theme files and fx-autoconfig (and read fx-autoconfig install instructions)
Install theese extensions Sidebery, Userchrome toggle, Adaptive Tab Bar Color.
Go to about: config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
Close the browser and install fx-autoconfig following the instructions from its page on github

Put userChrome.css, userContent.css and JS into your chrome directory.

Chrome folder file hierarchy

  chrome        
  ├ JS     
  │ └ move-buttons.uc.js     
  ├ utils       
  │ └ important files for fx-autoconfig work     
  ├ userChrome.css
  └ userContent.css

 (You can delete `CSS` and `resources` folders because it just examples for fx-autoconfig developers. This folders don't used in this theme)

Launch Firefox and open Sidebery in sidebar

Check if fx-autoconfig is installed

A new menu item appears
Import sidebery/sidebery-data.json into Sidebery (Sidebery settings > help > import addon data).
Set first toggle prefix to - and second toggle prefix to = in Userchrome toggle settings and customize keybinds to what you want.
( This is needed to switch sidebar modes )
Userchrome toggle settings
!

Recomended settings for Adaptive Tab Bar Color (you can experiment with it)

Adaptive Tab Bar Color settings

Optional. Rename your favorite wallpaper to wallpaper.png and put it into chrome folder. It will be shown on new tab page

Additional information

If for some reason you can't install fx-autoconfig (for example on linux it can be difficult), you can use the theme without it, but then the extensions, menu and overflow buttons will be on the bottom panel with urlbar.
Doesn't work on ESR and forks based on it. Probably will work when the next major ESR update is released.
You can choose how many pinned tabs there will be in one row. To do this, go to Sidebery settings > Styles editor. Select one of the following options there

Styles editor
You can choose which side the window control buttons will be on. By default they are on the right, but you can move them to the left. To do this, go to the /* WINDOW CONTROL BUTTONS */ section in the userChrome.css file. There you can do this:

userChrome.css

Features

Vertical tabs with multiple options (Always visible / Thin sidebar / Show on hover)
Takes up the least amount of space without taking away functionality
A floating search menu, roughly like the Arc browser. ( only appears when searching, if you just need to copy the url, the urlbar stays in the bottom bar )
Compact contextual menus and extensions menu
Slightly improved new tab page
Customization screen support ( Usually, themes so radically changing the interface completely break the customization screen )
Full screen support
The regular bookmark bar doesn't work, use Sidebery to manage your bookmarks. ( I don't know what can be done with the bookmark bar, if you have ideas, open a issue )

To-Do

Make the background colors less flat, add a glow, a blur or something like that
Do something about the bookmarks toolbar, right now it doesn't work at all
Maybe replace the protruding edges of the hidden panels with something more interesting

Thanks

MrOtherGuy Thanks for the fx-autoconfig and the repository with cool css's.
MightyFox concept Thanks for the cool concept and main idea
arcticfox-theme I used this theme as a base to create my own, but there was a bit of commonality left in the process.

Naezr / ShyFox