Options

🔔🔔 Various flags are exclusively for v5.0.0.

Previous versions must edit the code directly by referring to Legacy tips.

IMPORTANT

Since v5.0.0, it has become easier than modifying CSS directly, but there are still caveats.

Common

Restart is required after setting up.

The option system is built using CSS -moz-bool-pref() @supports function as a base.
@supports change in CSS is not detected in real time. (Only start time)

For more information, see Doc: Restrictions.

Using scripts

Scripts such as install.sh and install.ps1 can easily override styles and settings.

userChrome overrides

• ./userChrome-overrides.css (Will be copied <FIREFOX_PROFILE>/chrome/)
• <FIREFOX_PROFILE>/chrome/

userContent overrides

• ./userContent-overrides.css (Will be copied <FIREFOX_PROFILE>/chrome/)
• <FIREFOX_PROFILE>/chrome/userContent-overrides.css

user.js overrides

• <FIREFOX_PROFILE>/user-overrides.js
• ./user-overrides.js (Will be copied <FIREFOX_PROFILE>/chrome/)
• <FIREFOX_PROFILE>/chrome/user-overrides.js

from Doc: Project Structure

Using user.js

File user.js must modify the file located in <FIREFOX_PROFILE>/user.js, not <FIREFOX_PROFILE>/chrome/user.js.

Turn off settings that cause conflicts explicitly.
If you want to change the new tab button to a small square shape?

user_pref("userChrome.tab.newtab_button_like_tab",     true); // Original
// user_pref("userChrome.tab.newtab_button_smaller",   true); // Photon

Replace the existing settings to false and add a new setting.

user_pref("userChrome.tab.newtab_button_like_tab",  false); // Original
user_pref("userChrome.tab.newtab_button_smaller",   true);  // Photon

Using about:configs

It is recommended to erase <FIREFOX_PROFILE>/user.js after first run.
If not, firefox will overwrite it back to user.js's value every time it restarts.

As with user.js, conflicting settings must be explicitly set.
In the case of the above example.

• userChrome.tab.newtab_button_like_tab to false
• userChrome.tab.newtab_button_smaller to true

Etcs..

• Wiki:Compatibility Issues Solution: Compatibility related options, tips
• Wiki:Tips: Tips except for options

Distribution Settings

This is the difference between the default value of photon-style and proton-style

user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",        true); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",     true); // Original
user_pref("userChrome.tab.newtab_button_smaller",     false); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                 true);
user_pref("userChrome.tab.bottom_rounded_corner",      true);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);

user_pref("userChrome.tab.connect_to_window",          true); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",         true); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",       false); // Original
user_pref("userChrome.tab.photon_like_padding",        true); // Photon

user_pref("userChrome.tab.dynamic_separator",         false); // Original, Proton
user_pref("userChrome.tab.static_separator",           true); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",      true); // Photon
user_pref("userChrome.tab.newtab_button_proton",      false); // Proton

user_pref("userChrome.icon.panel_full",               false); // Original, Proton
user_pref("userChrome.icon.panel_photon",              true); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",    true);
user_pref("userChrome.rounding.square_tab",            true);

user_pref("userChrome.tab.connect_to_window",         false); // Original, Photon
user_pref("userChrome.tab.color_like_toolbar",        false); // Original, Photon

user_pref("userChrome.tab.lepton_like_padding",       false); // Original
user_pref("userChrome.tab.photon_like_padding",       false); // Photon

user_pref("userChrome.tab.dynamic_separator",          true); // Original, Proton
user_pref("userChrome.tab.static_separator",          false); // Photon
user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option

user_pref("userChrome.tab.newtab_button_like_tab",    false); // Original
user_pref("userChrome.tab.newtab_button_smaller",     false); // Photon
user_pref("userChrome.tab.newtab_button_proton",       true); // Proton

user_pref("userChrome.icon.panel_full",                true); // Original, Proton
user_pref("userChrome.icon.panel_photon",             false); // Photon
user_pref("userChrome.icon.panel_sparse",             false); // Just option

// Original Only
user_pref("userChrome.tab.box_shadow",                false);
user_pref("userChrome.tab.bottom_rounded_corner",     false);

// Photon Only
user_pref("userChrome.tab.photon_like_contextline",   false);
user_pref("userChrome.rounding.square_tab",           false);

Theme

Defaults

Blue accent color

Change the accent color of the built-in dark theme to blue.

Before - After

Apply

• userChrome.theme.proton_color.dark_blue_accent to true

Monospace

Before - After

Apply

• userChrome.theme.monospace to true

Decoration

Defaults

Remove Panel Animation

Before - After

Apply

• userChrome.decoration.disable_panel_animate to true

:root {
  --panelui-subview-transition-duration: 1ms !important; /* Disable top right corner menu sliding animation (0ms will not work!) */
}

Remove Sidebar Animation

Before - After

Apply

• userChrome.decoration.disable_sidebar_animate to true

Auto Hide

Tab

After

• After
• After (Opacity)
• After (Blur)

Apply

• userChrome.autohide.tab to true
• userChrome.autohide.tab.opacity to true (Opacity)
• userChrome.autohide.tab.blur to true (Blur)

Tab Bar

After

Apply

• userChrome.autohide.tabbar to true

Nav Bar

After

Apply

• userChrome.autohide.navbar to true

Boomark Bar

After

Apply

• userChrome.autohide.bookmarkbar to true

Side Bar

After

Apply

• userChrome.autohide.sidebar to true

On Linux, there is a bug that closes because no event is detected when dragging, so set the following options additionally. #742

• widget.gtk.ignore-bogus-leave-notify to 1

Fill URL Bar

After

• After
• After with One Liner

Apply

• userChrome.autohide.fill_urlbar to true

Buttons

After

• Back Button
• Forward Button
• Page Action

Apply

• userChrome.autohide.back_button to true
• userChrome.autohide.forward_button to true
• userChrome.autohide.page_action to true

Toolbar Overlap Mode

The autohide of each toolbar must be activated to work.

After

Apply

• userChrome.autohide.toolbar_overlap to true
  • Need userChrome.autohide.tabbar to true for Tab bar
  • Need userChrome.autohide.navbar to true for Nav bar
  • Need userChrome.autohide.bookmarkbar to true for Bookmark bar

In the case of bookmarkbar, it always appears without layout.css.has-selector.enabled to true(Only works Firefox V103 or higher). #457

Hidden

Tab Icon

Before - After

• Before
• After
• After (Always)

Apply

• userChrome.hidden.tab_icon to true
• userChrome.hidden.tab_icon.always to true (Always)

Tab Bar

Before - After

Apply

• userChrome.hidden.tabbar to true

It always appears toolbar padding without layout.css.has-selector.enabled to true(Only works Firefox V103 or higher). #460

Nav Bar

Before - After

Apply

• userChrome.hidden.navbar to true

Sidebar Header

Before - After

Apply

• userChrome.hidden.sidebar_header to true
• userChrome.hidden.sidebar_header.vertical_tab_only to true: Hide sidebar header only vertical tab addons

URL Bar Iconbox

Before - After

Apply

• userChrome.hidden.urlbar_iconbox to true

Bookmark Bar Elements

Before - After

• Before with userChrome.centered.bookmarkbar
• After (Icon)
• After (Label)

Apply

• userChrome.hidden.bookmarkbar_icon to true (Icon)
• userChrome.hidden.bookmarkbar_label to true (Label)

Disabled Menu

Before - After

Apply

• userChrome.hidden.disabled_menu to true

Centered

Tab

Refer: issue #71

Before - After

• Before
• After
• After (Lable)

Apply

• userChrome.centered.tab to true
• userChrome.centered.tab.label to true (Lable)

/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */
.tab-label-container{ display: grid; justify-content: safe center; align-items: safe center; }
.tab-label,.tab-secondary-label{ overflow: hidden; }

.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]),
.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; }

#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 1px; }
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 19px; }

URL Bar

Before - After

Apply

• userChrome.centered.urlbar to true

Bookmark Bar

Before - After

Apply

• userChrome.centered.bookmarkbar to true

Rounding

Distribution

Square Button

Before - After

Apply

• userChrome.rounding.square_button to true

Square Panel & Item

Before - After

Apply

• userChrome.rounding.square_panel to true
• userChrome.rounding.square_panelitem to true

Square Popup & Item

Before - After

Apply

• userChrome.rounding.square_menupopup to true
• userChrome.rounding.square_menuitem to true

Square Field & Checkbox

Before - After

Apply

• userChrome.rounding.square_field to true
• userChrome.rounding.square_checklabel to true

Padding

Defaults

First tab space

Refer: issue #229, #475

Before-After

Apply

• userChrome.padding.first_tab to true
  • userChrome.padding.first_tab.always to true (It works when there is a scroll mode, a pinned tab.)

  /* for First Tab Space */ 
  :root { 
    --space-left-tabbar: 8px; /* If you want drag space, set to 8px */ 
  } 

Drag Space

Refer: issue #210

Before-After

Apply

• userChrome.padding.drag_space to true
• userChrome.padding.drag_space.maximized to true: Maintaining drag space even when maximized mode

  /* for Extra Drag Space */
  :root {
    --space-above-tabbar: 8px; /* If you want drag space, set to 8px */
  }

Reduce menu padding

Before - After

Apply

• userChrome.padding.menu_compact to true

  :root {
    --menu-padding: 2px;
  }
  :root[uidensity=compact] {
    --menu-padding: 0px;
  }

Reduce Bookmark menu padding

Before - After

Apply

• userChrome.padding.bookmark_menu.compact to true

Panel Header

Before - After

Apply

• userChrome.padding.panel_header to true

URL View expanding

Before - After

• userChrome.padding.urlView_expanding to true

• userChrome.padding.urlView_result to true

URL View

Icon to Left

• userChrome.urlView.move_icon_to_left to true

Go button

• userChrome.urlView.go_button_when_typing to true

Pageaction button

Before-After

• userChrome.urlView.always_show_page_actions to true

Tab Bar

As Titlebar

Before - After

Apply

• userChrome.tabbar.as_titlebar to true

Tabs on bottom

Before-After

• Before
• After
• After (Above bookmark)
• After (Menubar on top)
• After (Hidden single tabmode)

Apply

• userChrome.tabbar.on_bottom to true
• userChrome.tabbar.on_bottom.above_bookmark to true (Above bookmark)
• userChrome.tabbar.on_bottom.menubar_on_top to true (Menubar on top)
• userChrome.tabbar.on_bottom.hidden_single_tab to true (Hidden single tab mode)

/* If Do you want like IE, Add this  */
/*
#PersonalToolbar {
  -moz-box-ordinal-group: 2;
}
*/

/* Navigator toolbox bottom border.
   If Do you want like IE, Remove this
 */
#navigator-toolbox {
  border-bottom-color: var(--toolbar-bgcolor) !important; /* Original: 1px solid var(--chrome-content-separator-color); */
}

/* At Activated Menubar */
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
  display: block !important;
}
:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
  visibility: hidden;
}

/* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
:root[tabsintitlebar] {
  --uc-window-control-width: 84px; /* Same as .titlebar-buttonbox-container      -  Space reserved for window controls, 84px is default value of linux */
  --uc-window-drag-space-pre: 30px; /* Same as .titlebar-spacer[type="pre-tabs"]  - Extra space reserved on both sides of the nav-bar to be able to drag the window */
  --uc-window-drag-space-post: 25px; /* Same as .titlebar-spacer[type="post-tabs"] */
}
:root[tabsintitlebar][sizemode="maximized"] {
  --uc-window-drag-space-pre: 0px; /* Remove pre space */
}

:root[sizemode="fullscreen"] .titlebar-buttonbox-container {
  display: none !important;
}
:root[sizemode="fullscreen"] #window-controls {
  position: fixed;
  display: flex;
  top: 0;
  right: 0;
  height: 40px;
}
:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
  height: 32px;
}
#nav-bar {
  border-inline-start-width: var(--uc-window-drag-space-pre, 0px);
  border-inline-end-width: calc(var(--uc-window-control-width, 0px) + var(--uc-window-drag-space-post, 0px));

  border-inline-style: solid !important;
  border-inline-color: var(--toolbar-bgcolor);
}

/* Windows */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  :root[tabsintitlebar] {
    --uc-window-control-width: 105px;
  }
}

@media (-moz-os-version: windows-win10) {
  :root[tabsintitlebar] {
    --uc-window-control-width: 138px;
  }
}

/* Use this pref to check Mac OS where window controls are on left */
/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
  :root {
    --uc-window-control-width: 72px;
  }
  :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
    border-inline-start-width: calc(var(--uc-window-control-width, 0px) + var(--uc-window-drag-space-post, 0px));
    border-inline-end-width: var(--uc-window-drag-space-pre, 0px);
  }
}

One Liner

Before - After

• Before
• After
• After (Combined Nav Bar)
• After (Tab Bar First)
• After (Responsive Mode)

Apply

• userChrome.tabbar.one_liner to true
• userChrome.tabbar.one_liner.combine_navbar to true
• userChrome.tabbar.one_liner.tabbar_first to true
• userChrome.tabbar.one_liner.responsive to true: One Liner mode works only when the screen size is above 1100px

Tab

Distribution

Defaults

Always Show Tab Icon

• Sample site: https://www.phoronix.com/forums/

Before - After

Apply

• userChrome.tab.always_show_tab_icon to true

.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
  display: -moz-inline-box !important;
}

or Using this addon

• https://addons.mozilla.org/en-US/firefox/addon/favioli/

Remove Close Button at Hover

Apply

• userChrome.tab.close_button_at_hover to false

Always show close button on background tab only on hover

Refer: #280

Apply

• userChrome.tab.close_button_at_hover to true (Default)
• userChrome.tab.close_button_at_hover.always to true

.tabbrowser-tab:not([visuallyselected]) .tab-close-button {
  visibility: collapse !important;
  opacity: 0;
}
.tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
  opacity: 1;
}

/* Animate */
@media (prefers-reduced-motion: no-preference) {
  /* Fade out */
  .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
    transition: opacity 0.1s var(--animation-easing-function) !important;
  }

  /* Fade in */
  .tabbrowser-tab:hover .tab-close-button {
    transition: opacity 0.25s var(--animation-easing-function) !important;
  }
}

Closed Button at Pinned Tab

Before - After

Apply

• userChrome.tab.close_button_at_pinned to true: Show closebutton when hover to selected pinned tab
• userChrome.tab.close_button_at_pinned.alway to true: Show closebutton when selected pinned tab
• userChrome.tab.close_button_at_pinned.background to true: Show closebutton when hover to pinned tab

Audio Label Show

Before - After

Apply

• userChrome.tab.sound_show_label to true

.tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
  display: -moz-box !important;
}

Supernova Like Context Line

Before - After

Apply

• userChrome.tab.supernova_like_contextline to true

Panel

Panel Separator

Refer: #148, #33

Before - After

• Before
• After (Remove strip)
• After (Full width separator)

Apply

• Remove strip: userChrome.panel.remove_strip to true
• Full width separator: userChrome.panel.full_width_separator to true

/* Remove panel strip */
#appMenu-fxa-separator {
  display: none;
}

Full width padding

Before - After

Apply

• userChrome.panel.full_width_padding to true

Side Bar

Overlap

Before - After

Apply

• userChrome.sidebar.overlap to true

Full Screen

Defaults

Icons

Distribution

Defaults

Disable all icons

• userChrome.icon.disabled to true

Account Panel Layout

Original

Image to right

• userChrome.icon.account_image_to_right to true

  #fxa-menu-avatar {
    display: -moz-inline-box !important;
    margin-inline-end: var(--arrowpanel-menuitem-padding);
    -moz-box-ordinal-group: 2 !important;
  }

Text to right

• userChrome.icon.account_label_to_right to true

  #fxa-menu-avatar {
    display: -moz-inline-box !important;
    margin-inline-end: var(--arrowpanel-menuitem-padding);
  }
  #fxa-menu-header-title, #fxa-menu-header-description {
    text-align: right;
  }

Both to right

• userChrome.icon.account_image_to_right to true
• userChrome.icon.account_label_to_right to true

  #fxa-menu-avatar {
    display: -moz-inline-box !important;
    margin-inline-end: var(--arrowpanel-menuitem-padding);
    -moz-box-ordinal-group: 2 !important;
  }
  #fxa-menu-header-title, #fxa-menu-header-description {
    text-align: right;
  }

Full icon menu

The goal is to fill all the menus with icons, but we still missed some things.
We wait for your contribution.

Refer: issue #412

Before - After

Apply

• userChrome.icon.menu.full to true

Global menu at Mac

Due to some bugs, it is not enabled by default.

Before - After

Apply

• userChrome.icon.global_menu.mac to true

Media Player

Defaults

Two Line

Before - After

Apply

• userContent.player.ui.twoline to true

New Tab

Defaults

Page

Defaults

Accent Page Colors

Before - After

• Before
• After (Blue)
• After (System)

Apply

• userContent.page.proton_color.dark_blue_accent to true (Blue)
• userContent.page.proton_color.system_accent to true (System)
  • widget.non-native-theme.use-theme-accent to true

Monospace

Before - After

Apply

• userContent.page.monospace to true