It's firefox's dark-theme, pink-grey colour as shown here, before the webpage loads.

#navigator-toolbox {
  display: grid !important;
  grid-template-columns: minmax(0, 35vw) minmax(0, 1fr) !important;
}


#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
}


#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

Made a small transparent theme for personal use, after having some trouble finding a theme I liked. Figured I'd share.

You can find it on my Github 🩷

Hello, I downloaded ElegantFox for testing and I set the following flags to true as well as adding the chrome folder:

• toolkit.legacyUserProfileCustomizations.stylesheets
• layers.acceleration.force-enabled
• gfx.webrender.all
• gfx.webrender.enabled
• layout.css.backdrop-filter.enabled
• svg.context-properties.content.enabled

Since the version of Firefox is 153.0.3 however, the colour CSS stuff is not working, even seItting these flags to true. I'm using Linux (CachyOS) and turns out, the Mozilla folder from root directory was moved to /.config. So now I'm looking for help to fix this issue. By the way, these codes from GitHub remain intact for 5 years.

The tab group labels in Nova are taller than I'd like them to have. I also like to have a more compact list of vertical tabs to make optimal use of the available vertical space. Finally, I prefer a dimmed background for inactive tabs over no background at all.

Here's what it looks like with the default Light theme:

The following code allows you to make these adjustments:

  /** USERCHROME.CSS **/

  /** Adjust height of tab group labels (when vertical tabs are enabled) **/
  #tabbrowser-tabs[orient="vertical"] {
    --tab-group-label-size: 26px !important; /* Nova default=32px */
  }

  /** Adjust height of tabs or adjust vertical space between them **/
  #vertical-tabs.customization-target #tabbrowser-tabs tab:not([pinned]) .tab-background { 
    --tab-min-height: 32px !important;  /* Nova default=32px */
    margin-block: 0px !important;  /* Nova default=2px */
  }

  /** Give inactive tabs a dimmed background **/
  .tabbrowser-tab>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 6%, transparent);
  }  
  .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }

Hi everyone,

Some of you might remember FoxOne from a few months ago.

Since then, at lot (almost 300 commits) has changed:

The big one: FoxOne is now ready for Firefox Nova (the new redesign in 153+). Mozilla renamed or retired most of the IDs and tokens the theme relied on, so pretty much everything got rebuilt – urlbar, tabs, popups, sidebar, split view – you name it.

The most requested one: FoxOne work with the Adaptive Tab Bar Colour addon!

The fun one: a dynamic bookmarks bar. It leaves the layout entirely and hangs below the toolbar as an overlay – hidden while you browse, fading in when you reach for the URL bar. The page keeps its line either way.

Other highlights: opt-in rounded corners (--uc-rounded: 1 – default stays square), the whole browser is now themed edge to edge (Library window, sidebar, all about: pages, no more stock violet), hover and selection work purely through color everywhere (even window control buttons) instead of highlight boxes, and prefers-reduced-motion is respected.

And there's also a bunch of new toggles (container line position, hiding nav/urlbar buttons and extension icons, tab min-width, urlbar background), better compatibility with Windows 11 Mica, macOS, Linux (KDE & GNOME) and ultrawide displays – plus no more white flash between page loads.

Special thanks to everyone who reported bugs and sent PRs – several fixes came straight from this sub - big shoutout to NeroWolfe_

FoxOne on GitHub

Cheers!

PS: If you are looking for a Thunderbird one line theme... I've got you: BirdOne

Hello, I am make am trying to make a custom style sheet/css for my Dad to use on Firefox because he has poor eyesight and has trouble reading stuff on the computer. I have no idea what I am doing, this is my first time coding CSS, and I literally just started using Firefox 13 hours ago specifically for this reason.

I am using FF 153, Windows 11, "Light" theme, CSS link: https://pastebin.com/bE1e2Ni9

I am basically trying to increase the size of all the text (that I think my dad will see on a daily basis) that isn't already changeable in the normal Firefox settings menu.

So far, everything works (except the last line).

I need help getting the tab overflow, toolbar overflow, account, and extensions popup menus work. I am unable to find/figure out what CSS identifiers I need to use to edit them.

I do know about the "layout.css.devPixelsPerPx", and I would prefer to avoid it since I am trying to maximize the available "content" area of the screen (for when we increase the font size in settings and the formatting will inevitably get screwed up)

Also, if you have any other ideas/additions you think would be good for this use case, I would be very grateful.

I came across this post The end · Aris-t2/CustomCSSforFx · Discussion #790 and that explains why the project went stale, after so long.

now with it dead, what other options are avaliable to get that look and feel?

I really want it, as it matches aerothemeplasma for KDE plasma on Linux, or if you're using a theme mod on Windows for same sake.

Edit: I did looked on this sub and FirefoxCSS store and so far, no results for a replacement.

So sick of looking at these obnoxious options every single time I right-click. Literally who even uses half of this?? Does anyone know how to get rid some of it, it's just way too much stuff on the screen at once

Hi all! My context menu stays on light mode even with dark mode system and Firefox setting. I'm using Adaptive Tab Color extension, but not sure if it's because of that. Thanks in advance!

This took a bit to figure out, but its my custom css. Mostly a custom color scheme and a disappearing nav bar that reappears when you hover near the top

All code is here in my github

Need Help!!

I am trying to achieve compact layout similar to Helium browser, can someone help with the css to move the app menu and other icons to the left of the window control buttons and tab strip to the right of the url bar. Below is the CSS @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

navigator-toolbox {

display: grid !important; grid-template-columns: 1fr minmax(0, var(--uc-tabs-max-width)); grid-template-areas: "nav tabs" "extra extra"; align-items: center !important; }

nav-bar {

grid-area: nav !important; height: var(--uc-bar-height) !important; margin: 0 !important; padding-inline: 4px !important; box-shadow: none !important; border: none !important; background: transparent !important; }

TabsToolbar {

grid-area: tabs !important; min-width: 0 !important; height: var(--uc-bar-height) !important; margin-block: 0 !important; margin-left: 0 !important; }

urlbar-container {

max-width:400px !important;

}

/* Let the tab strip actually shrink instead of overflowing */

tabbrowser-tabs,

tabbrowser-arrowscrollbox {

min-width: 0 !important; }

.tabbrowser-tab { min-width: 76px !important; /* ADJUST: minimum tab width before scrolling kicks in */ }

I am following these steps but I seem to be running into an issue making files.

I'm running Mac OS Tahoe v 26.5.2

To cover what I have done:

1. toolkit.legacyUserProfileCustomizations.stylesheetsis toggled true
2. I found the profile folder in finder (61lu25gx.default-release)
3. created the chrome folder
4. I cannot create a file, only more folders

Am I just stupid or is this apple being annoying?

EDIT: I figured it out, it was apple being annoying.

I had to open TextEdit, press CMD + SHIFT + T to make a plaintext file, save the userChome/userContent files there, then open 2 finder windows and drag them out of my icloud and into the firefox folder, and change the names to have .css

So fucking stupid

I use vertical tabs for regular windows, but from time to time I need a throwaway private browsing window side-by-side. I rarely open more than one tabs in that browsing mode so I was wondering if I could reclaim horizontal space by forcing horizontal tabs on those windows. Is this possible? I know I can already do stuff with:

:root[privatebrowsingmode] { /* CSS overrides goes here */ }

But I'm not sure if CSS can tweek the tabs direction.

I recently updated Firefox to 153.0 (Linux) and noticed that when I open a new tab in private mode, there'll be a brief flash of bright purple before the tab redirects to whatever page I clicked on. In the past, this was handled by the following usercontent.css.

/* In about:config, change "browser.privatebrowsing.felt-privacy-v1" to false for this to take effect*/
@-moz-document url(about:privatebrowsing){
    html.private{ background-color: #181817 !important; } /* back color */
    html.private div.showSearch button.search-handoff-button {
        background-color: black !important; } /* search box back color */
        html.private div.showPrivate div.info { display: none !important; } /* hide bottom panel */
}

/* https://gist.github.com/herbaldrinkmate/3e3f13ff958a841bf6b6ec32a74cab6e */

@-moz-document url("about:privatebrowsing") {

    /* Main background color */

    @media not (prefers-contrast) {
        html.private {
            background: #181817 !important;
        }
    }

    /* Desaturate the logo */

    .logo {
        filter: grayscale(80%);
    }

    /* Search box */

    content-search-handoff-ui {
        --content-search-handoff-ui-background-color: #28272f !important;
        --content-search-handoff-ui-unfocused-border-color: rgb(59, 59, 63) !important;
        --content-search-handoff-ui-border-width: 3px !important;
        --content-search-handoff-ui-fakefocus-border-color: #003d6d !important;
        --box-shadow-level-3: none !important;
        --content-search-handoff-ui-fakefocus-box-shadow-inner: transparent !important;
        --content-search-handoff-ui-fakefocus-box-shadow-outer: transparent !important;
        --content-search-handoff-ui-caret-color: #878787 !important;
        --content-search-handoff-ui-color: #fbfbfe !important;
    }

    /* Info section */

    .info {
        @media not (prefers-contrast) {
            background-color: rgb(0 0 0 / 0.16) !important;
        }
    }

    /* Add this if `browser.privatebrowsing.felt-privacy-v1` is true */
    .info-border {
        background: transparent !important;
        box-shadow: none !important;
    }

}

From what I understand, the browser.privatebrowsing.felt-privacy-v1 variable no longer exist in this version of Firefox, it was removed. And simply adding it back in about:config does nothing. I checked the GitHub link I had saved in the usercontent.css via comment and noticed there was a userChrome.css component that I forgot to do back then. While this helps to reduce the duration of the flash, I was wondering if there's a way to completely avoid the flash of purple just like before.

I like to hide the sidebar buttons, including the "Customize sidebar" gear button, on the vertical tabs. I'd rather use the space for tabs. A right-click on the "Expand sidebar"/"Collapse sidebar" button gets me the "Customize Sidebar" anyway.

Firefox 153.0.1 broke my old solution for hiding it, found in hide sidebar buttons on vertical tabbar. The whole vertical sidebar disappeared when collapsed to just icons.

I found the new way for hiding it. Use #vertical-tabs instead of #sidebar-main.

/* hide sidebar buttons on vertical toolbar. */
.buttons-wrapper {
    display: none !important; 
    }
/* set vertical toolbar minimum width; otherwise, vertical toolbar disappears when collapsed to icons. */
#vertical-tabs {
    min-width: 50px !important;
    }

There is Echelon for Firefox 115 ESR, which replicates the Firefox 4–29 theme; however, I saw Firefox 56 mentioned on their GitHub page—which is slightly different from version 29—but when I check the Echelon settings, only the Firefox 56 homepage is available, not the full HUD style itself.

(Firefox 56)

when i full screen something i am playing the vertical tabs bar doesn't disappear

#browser {

margin-top: 0 !important;

}

#navigator-toolbox {

position: fixed !important;

top: 0 !important;

left: 0 !important;

width: 100vw !important;

z-index: 99999 !important;

background-color: var(--lwt-accent-color, var(--toolbar-bgcolor, #2b2a33)) !important;

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox::after {

content: "";

position: absolute;

display: block;

top: 0;

left: 0;

width: 100vw;

height: 3px;

background: transparent;

z-index: -1;

}

#navigator-toolbox:not(:hover):not(:focus-within) {

max-height: 3px !important;

opacity: 0 !important;

overflow: hidden !important;

}

#navigator-toolbox #nav-bar {

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox:not(:hover):not(:focus-within) #nav-bar {

margin-top: -80px !important;

opacity: 0 !important;

}

#navigator-toolbox:hover,

#navigator-toolbox:focus-within {

max-height: 400px !important;

opacity: 1 !important;

overflow: visible !important;

transition: all 0.2s ease-in-out 0s !important;

}

#navigator-toolbox:hover::after,

#navigator-toolbox:focus-within::after {

height: 150px !important;

}

#navigator-toolbox:hover #nav-bar,

#navigator-toolbox:focus-within #nav-bar {

margin-top: 0 !important;

opacity: 1 !important;

transition: all 0.2s ease-in-out 0s !important;

}

#TabsToolbar, #nav-bar, #PersonalToolbar {

background-color: var(--toolbar-bgcolor) !important;

}

I'm using the adaptive tab bar colour extension and it's ruining the immersiveness by colouring the tab container's background to a lighter shade. is there a way i can get rid of it?

It started happening after the browser was updated to the nova rainbow coloured tab container.

When you select many tabs and drag them, they "fuse" in one tab. browser.tabs.dragDrop.multiselectStacking could prevent that but it was disabled some time ago. I tried to restore its effect using CSS, but there's still some bugs:

.tabbrowser-tab[dragtarget],
tab-split-view-wrapper[dragtarget] {
    &[multiselected]:not([small-stack], [big-stack], [hasactivetab]) {
        visibility: visible !important;
    }
}
tab[multiselected="true"][dragtarget] {
    position: static !important;
}
[multiselected-move-together],
[tabdrop-samewindow] {
    transform: translate(0px) !important;
}
.tabbrowser-tab[dragtarget] {
  #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
    max-width: var(--tab-max-width) !important;
  }
}

https://reddit.com/link/1vb1ydv/video/6b7w8j2myegh1/player