ishid4 / ArcWTF

A userChrome.css theme to bring Arc Browser look from Windows to Firefox. No waitlist, no registration needed ✨

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Screenshot 1 with tab sidebar on Screenshot 2 with tab sidebar off

Compability

I modify, made and test this theme on Firefox 122, Windows 10. Based on edge-frfox's compability, 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 gambar
Original Sidebery (with CSS styling) gambar
Sidebery (with CSS styling) after --frame-bg parameter modified, the panel blend better in Floorp gambar

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.
  • Additional addons for theming: Adaptive Tab Bar Colour & Firefox Color extension

(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: Toolbar configuration for "vertical bar always on" Toolbar configuration for "vertical bar autohide"
  • Use the Userchrome Toggle to turn sidebar on (fixed positions) or off (autohidden, hover to show tabs).

Bonus!

  • 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.
  • Check interesting tweaks from bmFtZQ/edge-frfox theme page - Some of them are already pre-applied in ArcWTF.

Credits

About

A userChrome.css theme to bring Arc Browser look from Windows to Firefox. No waitlist, no registration needed ✨


Languages

Language:CSS 100.0%