sirlan-ff00ff/arcticfox-theme

a theme for Firefox (and sidebery) to make it look and somewhat behave like Arc

arcticfox theme

a theme for Firefox (and Sidebery, because it fancy) to make it look and somewhat behave like Arc browser on mac (rev 1)

a post with a video of it (lsightly earlier in dev) in use
little demonstration video with slightly newer version

🎊 features

• it kinda looks like Arc... that's the whole point
• kinda minimalistic
• has space to grab the window! (quite uncomon with themes that mess with the header bar)
• somewhat tested
• some strightforward(-ish) customization in the file

---

ℹ️ addons to use

• sidebery for sidebar tabs, workspaces, groups...
• Firefox Multi-Account Containers for multiple logins
• Userchrome Toggle for toggling keeping the sidebar open (migh try creating an extensions for extra controls later, idk)
• (preference) themes from Firefox Color
  • another recomendation is Adaptive Tab Bar Color

how to install

yes, it is a bit contrived, but requires quite a specific setup to work well

• clone or download this repo locally
• install the listed addons
  • allow them to run in private windows
• open sidebery settings, go to 'help' and 'import addon data', then select the json file in sidebery/sidebery-data.json
• (if not showing already) open the browser sidebar and select the 'sidebery' sidebar
• in the settings for the 'userchrome toggle' extension, for the 'style toggle 1' put || in prefix (should also have the ending space) and apply changes (you migh also change the name to 'sidebar' if you want, and disable the 'display notification')
• select a firefox theme other than the 'system/auto' one (alpenglow also looks weird with it)
• disable the bookmarks toolbar
• disable the 'firefox view' button (that one at the top, left of the tabs, that firefox enables by default)
• reorder the browser toolbar widgets, they should be in the order
  • url-bar 'show sidebars'-button back forward reload spacer extensions-button overflow-menu hamburger-menu
  • the url bar must be the first item in the toolbar
  • there must be the sidebar button (for enabling the sidebar in private windows)
  • do this before applying the theme, it messes up the customize page
  • also set the density to 'normal' (it probably already is)

if you don't have userChrome (and browser dev tool) enabled (if you do, skip to the next part)

• go to about:config in the url bar (and accept the message)

• in the search bar insert toolkit.legacyUserProfileCustomizations.stylesheets

• if besides it there is a 'false', double click it, it should turn into 'true'

• right click anywhere in the page and open 'inspect' from the menu, it should open the dev panel

• click the three dots at the top right corner of that panel and in settings

• right at the bottom/right in the 'advanced' enable 'enable browser chrome and add-on debugging toolboxes' and 'enable remote debugging'

• close and re-open firefox

read next section

(if you want to activate the browser dev tool to inspect the browser ui and live change the css, press 'ctrl + shift + alt + i', it behaves like the normal dev tool but for the browser)

if/when you have userChrome (and browser dev tools) enabled

• write about:profiles in the url bar
• on the profile that is listed as 'default profile: yes' click 'open directory' for the root directory, it should open your file manager in that folder
  • on flatpak programs, this might show the wrong addres (/home/$user/.mozilla/...), the right address is (/home/$user/.var/app/$app_id/.mozilla/...)
  • it also might be something other than .mozilla if you're using a fork (librewolf)
• create (if doesn't exist) a sub folder called 'chrome' (exact name, all minuscule)
• put the file chrome/userChrome.css in there (the file must be called 'userChrome.css')
• if you want to use some extra options, put the folder opt/ there as well

(ℹ️ you might want to edit some settings in the css file, feel free to open it in your text editor, if you're on Windows there are some options in the file you need to uncomment to make it work better, do a 'ctrl + f' for WINDOWS in the file)

• close and re-open firefox, it should have the theme applied

using

• put your mouse on the left edge of the window to open the sidebar containing the tabs, url bar, and browser toolbar
• to keep the side bar open, on the extensions list from the toolbar, click the userchrome togge one, it should now keep the sidebar open (might glitch a bit)
• for workflow stuff, see the sidebery documentation
• you can drag the window from the top space or on the header bar when expanded

extra customization information and tips

• Window buttons like macOS
  • uncomment @import url('opt/mac_buttons.css'); in the imports section

---

⚠️ btw

this theme is:

• buggy in some places
• janky in private windows or windows with the sidebar hidden by default
• only comfirmed to work on firefox 120 on linux, and on Windows 10 (with tweaks)
  • tested on some forks, and ESR or anything based on it (waterfox, floorp) does not work
  • the firefox version must fully support the :has() selector and css nesting
• best used with sidebery but I guess can be used with Tree Style Tab, didn't test tho
• not guaranteed to be 100% working out of the box, you might need to tweak it some
• probably doesn't work on macOS

(for some more info and warnings see the comments in chrome/userChrome.css)

arcticfox-theme's Issues

Doesn't work on macOS

This looks really well made. Any chance you can get it to work on macOS?

toolbar widgets mess

I set like README (I think) but is a mess. Where is the error?

[Feature Request] Include the Padlock Icon

Can you also include the Address/URL bar to show the padlock icon too? Not having the lock icon introduces a chance of going to an unencrypted site or a site without valid SSL configured without getting notified.

Theme support for Left sided Window Controls

I'm running Firefox on Fedora Workstation 39 and the the theme works fine (there are minor bugs but I don't really mind them), except the window controls placement. Since, I have the WhiteSur theme installed for Gnome and have the window controls on the left side using the Gnome Tweaks app, the back, forward and refresh buttons and the window controls buttons (close, minimize, maximize) overlap with each other. There is also this unwanted space on the right side after the menu button. Also, I did enable the mac_buttons.css by uncommenting in the userChrome.css file but the window controls doesn't seem to change. I don't know how to inspect the sidebar to edit the css, so can you point me out how I can get this to work properly?

Enhancement/Future Version Idea: Right sidebar version of this theme

I kinda want to know how the experience would be if we had the sidebar on the right side, instead.

How to Hide web border

How can I hide this borders (web borders)

How to change userchrome-toogle icon?

How can I change this icon ?

Weird twitching

As I understand it, if you move the cursor over this place, the :hover attribute disappears for a millisecond and the sidebar starts to close, but it doesn't have time because of the animation. If you disable the animation, the sidebar will just disappear instead of twitching.

Enhancement: Enabling custom icon option to replace Userchrome Toggle button with a sidebar icon

:is(.webextension-browser-action, .eom-addon-button)[data-extensionid="[email protected]"] .toolbarbutton-icon {
     list-style-image: url(./userchrome-toggle.svg); 
}

Code for userchrome.css, with the SVG put in the chrome folder. Would be good to make it even closer to the Mac Arc UI in your theme. Icons can be a Mac-OS themed sidebar one, or... just any sidebar icon

Credit: https://github.com/aminomancer/uc.css.js/blob/master/uc-extensions.css

Works with "mac" caption buttons

the purple border is because this screenshot is from a private windows in Manjaro KDE Linux

To get this buttons import this code
round_caption_buttons.css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_caption_buttons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Make window-control - aka caption buttons round following theme text color. */

/* Uncomment the following line to use colorful icons ala MacOS */
.titlebar-button{ --uc-caption-background: var(--uc-caption-color) }

.titlebar-button { opacity: 0.6; --uc-caption-color: rgb(252,185,15) }
.titlebar-min    { opacity: 0.5; --uc-caption-color: rgb(36, 209, 49) }
.titlebar-close  { opacity: 0.7; --uc-caption-color: rgb(250, 55, 55) }

.titlebar-button:hover { opacity: 1 }

.titlebar-button {
  background: transparent !important;
  padding-inline: 6px !important;
  transition: opacity 0.2s ease;
}
.titlebar-close {	padding-right: 5px !important; }

.titlebar-button > .toolbarbutton-icon {
	list-style-image: none;
	border-radius: 10px;
  background: var(--uc-caption-background,currentColor) !important;
}

/* OPTIONAL - move caption buttons in tabs toolbar a bit upwards */
/* #TabsToolbar > .titlebar-buttonbox-container{ margin-bottom: var(--toolbarbutton-inner-padding) !important; } */

in userchrome.css

/*code*/

@import url('round_caption_buttons.css');

/*more code*/

#nav-bar {
  /* ** width of the window control buttons (min max close)
        that the toolbar should take into account
     // change to 0 if using server side decorations
  */
  --wbt-wdt: 4.75rem; /*<-------- ajustment to fit better the buttoms*/

/*More code*/

Do not resize site content

What should be done to make the site content not resize when the sidebar opens. I want the sidebar to overlay on top of the site and not resize it. Most sites are not adapted to frequent window resizing and do it very jerky. I really like this theme, but this one flaw makes it very frustrating to use

info - cleaner rewrite

yes, has been a short time, but I already think this theme needs a rewrite, to make use newer css features and better structure to be cleaner and easier to maintain/customize

already have some code done, and there are a few points about it

• it is already a bit cleaner, with some more concise names, and requires less setting of margins and offsets to keep from breaking
• the version of firefox must fully support CSS nesting and the :is :where tags (which the newest version (of writing) already does, but might exclude people that are a few versions earlier)
• the overlay when not 'pinned' behaviour will be the default, as it's kinda bad to constantly resize the page (meaning lots of layout updates) when you for example just want to reach for a single button (you can still change to have the resizing behaviour, but will not be 'supported' by me)

current code, still early stage

/* revamped user chrome */

* {
  box-sizing: border-box !important;;
}

:root {
  --sdbr-max-wdt: 360px;

  --hedr-hgt: 6.5rem;
  --wbtn-wdt: 3.75rem;
  
  --anim-dur: .5s;
  
  --brdr-rad: 10px;
  --page-pad: .7rem;
  
  --bordr-col: #fafafa30;
  --shadw-col: #00000010;
}

:root {
  --sdbr-wdt: 0px;
  --brws-bg-col: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
  
  --grad: linear-gradient(90deg, var(--bordr-col) 0%, var(--bordr-col) 4%, var(--shadw-col) 5%, transparent);  
  --ovrl-wdt: 1rem;
  --ovrl-wdt: 0px;
  --sdbr-real-wdt: calc(var(--sdbr-wdt) + var(--ovrl-wdt));
  --sdbr-item-wdt: calc(var(--sdbr-real-wdt) - var(--page-pad));

  --bdrr: var(--ovrl-wdt) solid;
  --bdri: var(--grad) 1;
  --bdio: 0 var(--ovrl-wdt);
  --bdis: 0 100%;
}

:is(#navigator-toolbox, #sidebar-box) {
  position: absolute;
  left: 0;
  min-width: var(--page-pad) !important;;
  width: var(--sdbr-real-wdt) !important;
  z-index: 1;
  overflow: clip;
  transition: width var(--anim-dur) ease-out;
  
  border-right: var(--bdrr) !important;
  border-image: var(--bdri) !important;
  border-image-outset: var(--bdio) !important;
  border-image-slice: var(--bdis) !important;
  
  & > * {
    width: var(--sdbr-real-wdt) !important;;
    opacity: 0%;
    /*padding-right: var(--page-pad);*/
  }
}

#navigator-toolbox {
  height: var(--hedr-hgt) !important;
  z-index: 2;
}

#sidebar-box {
  top: var(--hedr-hgt);
  height: calc(100vh - var(--hedr-hgt));
  background: var(--brws-bg-col) !important;
}
#sidebar-splitter { display: none }
#sidebar-header { display: none }
#sidebar { background: var(--brws-bg-col) }

#browser > #appcontent {
  transition: margin var(--anim-dur);
}
#appcontent .browserStack {
  background: var(--brws-bg-col);
}
#appcontent browser {
  margin: var(--page-pad);
  border-radius: var(--brdr-rad);
  transition: margin var(--anim-dur);
}

#main-window:has(
  #sidebar-box:hover,
  #navigator-toolbox:hover
) {
  --sdbr-wdt: var(--sdbr-max-wdt);
  --ovrl-wdt: 1rem;
  
  & :is(#navigator-toolbox, #sidebar-box) {
    animation-name: oflw-vis;
    animation-duration: .01s;
    animation-delay: var(--anim-dur);
    animation-fill-mode: forwards;
    
    & > * {
      opacity: 100%;
    }
  }
}

#main-window[titlepreface*="|| "] {
  --sdbr-wdt: var(--sdbr-max-wdt);
  --ovrl-wdt: 1rem;
  --bdri: linear-gradient(transparent, transparent);
  
  & :is(#navigator-toolbox, #sidebar-box) {
    overflow: visible;
    
    & > * {
      opacity: 100%;
    }
  }

  & #browser > #appcontent {
    margin-left: var(--sdbr-real-wdt);
  }
  & #appcontent browser {
    margin-left: 0px;
  }
}

@keyframes oflw-vis {
  from {overflow: clip;}
  to {overflow: visible;}
}

/* --- */

#titlebar {
  height: 3rem;
}

#nav-bar {
  margin-top: -3rem;
  width: calc(var(--sdbr-item-wdt) - var(--wbtn-wdt)) !important;
  background: none !important;

  border: none !important;
  box-shadow: none !important;
}

#nav-bar.browser-toolbar {
  overflow: visible !important;
  height: 3rem;
}

#tabbrowser-tabs,
#alltabs-button,
#new-tab-button,
#private-browsing-indicator-with-label
{
  display: none;
}

#urlbar-container {
  position: absolute;

  flex: 0 !important;

  margin: 0;
  top: 2.75rem;

  overflow: visible !important;
  box-sizing: border-box !important;
}

/* // put the url bar in the right position */
#urlbar {
  width: calc(var(--sdbr-item-wdt) - var(--page-pad) * 0.25) !important;
  margin-left: calc(var(--page-pad) * 0.15);
  height: 2.75rem;
}