Arc Windows to Firefox / Floorp

For you who want to try new, shiny Arc Browser on Windows! No registration needed, compatible for all Windows versions ✨

Based on edge-frfox theme by bmFtZQ | Vertical tab sidebar setup derived from arcticfox-theme by Sirlan-ff00ff.

Any suggestions or concerns? Submit new issues or contact me on Reddit.

Previews

Compability

I modify, made and test this theme on Firefox 123, Windows 10. This theme can work with Linux and MacOS too.

ArcWTF will clash with the default Firefox system theme, dark themes that have light toolbar/light URL bar, and light themes with dark toolbar/dark URL bar.

Vertical tabs are currently disabled in Private Browsing Mode due to behaviour clashes with window controls.

For Floorp, there's several incompability I currently have since it might clashed with several parts of the built-in theme they had, like:

• I haven't been able to modify URL font size
• Userchrome Toggle hasn't working yet, so the vertical tab sidebar is either a) autohidden but you can't toggle it to be in fixed position, or b) can be switched on to be shown/hidden, but it can't be automated.
• Advanced configurations from this theme in about:config doesn't worked, so the sidebar tab (either in Sidebery, TST or their default vertical tab) tend to mimic the window background instead of mimicking tab/toolbar background to blend with the toolbar and browser border. So far I can only fix this in Sidebery - you will have to grab toolbar's hex/RGB color and apply it to --frame-bg parameter, as shown in screenshots below.
• Hiding tabs bar, turning on browser border frame is applicable only through Floorp's settings instead of through the theme + about:config configurations.
• Otherwise, the theme are working quite well! Split view is available too, but since the devs haven't put the option in right-click context menu, you will have to use their default vertical tab to do it. Though it doesn't look as good as Sidebery.

Condition	Screenshot
Original vertical tab bar + Split view
Original Sidebery (with CSS styling)
Sidebery (with CSS styling) after --frame-bg parameter modified, the panel blend better in Floorp

Applying the theme

(1/3) Installing addons and choosing theme

• Install Sidebery and Userchrome Toggle.

• Open about:addons, click 'Userchrome Toggle', go to 'Options' tab.

• Disable 'Display a notification', Go to 'Style Toggle 1', put || in prefix (should also have the ending space) and apply changes.

  

• Click extension button (puzzle icon), right click on Userchrome Toggle icon, click 'Pin to Toolbar'.

  

• Open Sidebery settings, go to the Style Editor and paste the CSS config, or go to Help section and click import my backup JSON file. Go to Navigation Bar settings and add tab panels to use as Spaces to your liking. Personally I use History panel as the first item to mimic 'Recently closed' button on Arc so applying custom icon on the CSS config would be easier.

• Some of my favourites Firefox themes to apply with ArcWTF:

  • Nord Polar, Nord Dark
  • Arc Dark Theme, Arc Theme
  • Activist - Soft
  • Foto - Bold
  • Plum Torte
  • Dark Teal (chrome-like)

(2/3) Applying the CSS theme

• Download - for Firefox; for Floorp - or clone this repo locally
• Go to about:profiles
• Check 'Root Directory' and click 'Open Folder'/'Show in Finder'
• Click and open 'chrome' folder (or create the folder if it isn't existed yet)
• Paste folders and files from this repo to the chrome folder
• Go to about:config, paste toolkit.legacyUserProfileCustomizations.stylesheets into the bar and set its value to true/choose Boolean and click + (plus) icon.
• After that, paste svg.context-properties.content.enabled into the bar and set its value to true/choose Boolean and click + (plus) icon.
• Restart Firefox

(3/3) How to use this theme?

• Hover to browser left corner to show the vertical tabs.
• Right-click navigation toolbar and click 'Customize Toolbar'. Move Userchrome Toggle button to the left position, before back-forward-reload buttons. Put flexible spaces before and after the URL bar. Take a look on screenshots below for guides:
• Use the Userchrome Toggle to turn sidebar on (fixed positions) or off (autohidden, hover to show tabs).

Bonus!

Tweaks	Screenshot
Replace Firefox icon on Start Menu and Taskbar	Download Arc.ico, open C:\ProgramData\Microsoft\Windows\Start Menu\Programs directory, right click Firefox shorcut, click 'Properties', click 'Change Icon...' and use the ICO file for maximum Arc feel. Pin to taskbar too.
Activate popup search/URL bar launchpad	Go to about:config and add new Boolean entry: uc.tweak.popup-search
Hide header sidebar, containing space/tab panel name	Go to about:config and add new Boolean entry: uc.tweak.hide-sidebar-header
Extend sidebar length to 250px (original: 200px)	Go to about:config and add new Boolean entry: uc.tweak.longer-sidebar
Other tweaks (some might've already preapplied here)	Check bmFtZQ/edge-frfox theme page and add to about:config
Use Segoe UI Variable (Windows 11 default font) as Firefox UI font, as shown on preview screenshots	Download from CufonFonts, install and uncomment the related settings on userchrome.css and Sidebery style configurations (sidebery-css-style)
Additional addons for theming	Adaptive Tab Bar Colour & Firefox Color extension

Changelogs

Current Issues/Things to Improve

• Improving Floorp compability.
• Recently added support for translucency in Mac, still on early trial mode. (thanks to artsyfriedchicken)
• Add support to apply MacOS default icons (optional), replacing Fluent icons used on ArcWTF.
• Window controls not working in Private Browsing Mode when tab bar are hidden. Current solution: Don't enable Sidebery and Userchrome Toggle on Private Browsing; the script will automatically show tab bar when you go on Private Browsing Mode. credit to bmFtZQ/edge-frfox (low priority)
• Bookmarks bar not showing bookmarks even when enabled. Current solution: Click Menu (Arc logo) > Bookmarks, or use Sidebery bookmarks panel to access bookmarks. (low priority)
• Firefox alternative window controls are shown overlapping GTK window controls when using Adaptive Tab Bar Color addon in Linux. Current solution: Install Browser Adaptation Dynamic Theme addon. credit to LuanderFarias & Enigma1309

Credits

• bmFtZQ - edge-frfox
• ssirlan-ff00ff - arcticfox-theme
• The Browser Company
• Javisperez on SVGRepo - base of sidebar & split tabs icons
• Microsoft - Fluent UI system icons
• MrOtherGuy - several CSS hacks
• DatGuyPiko - compact extensions menu
• mbnuqw - support on Sidebery customizations