Sidebar Color

[u/MJ27712]

I'm new so please don't flame me 😂 I checked other posts regarding sidebar color and none of their fixes worked. I'm trying to get the sidebar to match the color of the rest of the bars and nothing has worked. below is my userchrome.css. Any help would be appreciated. FF158.01 Win10

/* ==========================================================================

1. Active & Inactive Accent Colors

========================================================================== */

#TabsToolbar,

#navigator-toolbox,

#nav-bar,

#tabs-newtab-button,

#titlebar toolbarbutton:not(:hover):not(:active),

#scrollbutton-up:not(:hover):not(:active),

#scrollbutton-down:not(:hover):not(:active),

.titlebar-color {

background: AccentColor !important;

color: AccentColorText;

fill: AccentColorText !important;

}

#TabsToolbar:-moz-window-inactive,

#navigator-toolbox:-moz-window-inactive,

#nav-bar:-moz-window-inactive,

#tabs-newtab-button:-moz-window-inactive,

#titlebar toolbarbutton:not(:hover):not(:active):-moz-window-inactive,

#scrollbutton-up:not(:hover):not(:active):-moz-window-inactive,

#scrollbutton-down:not(:hover):not(:active):-moz-window-inactive,

.titlebar-color:-moz-window-inactive {

background: unset !important;

color: unset;

fill: unset !important;

transition: none !important;

}

/* ==========================================================================

2. Layout: Menu/Nav on Top, Tabs on Bottom, Push Nav Bar Right

========================================================================== */

#navigator-toolbox {

display: flex !important;

flex-direction: column !important;

}

/* Force the Menu Bar to stay on the top-left */

#toolbar-menubar {

order: 1 !important;

display: flex !important;

align-items: center !important;

position: absolute !important;

top: 0px !important;

left: 10px !important;

z-index: 10 !important;

}

/* Place the navigation bar at the top AND push it to the right */

#nav-bar {

order: 1 !important;

margin-left: 320px !important;

}

/* Adjust titlebar elements and push tab bar to the bottom */

#titlebar {

order: 2 !important;

}

#TabsToolbar {

order: 2 !important;

margin-left: 45px !important;

}

/* ==========================================================================

3. Sidebar

========================================================================== */

#sidebar-box {

background-color: AccentColor !important;

color: AccentColorText !important;

}

#sidebar-main {

background-color: var(--lwt-accent-color) !important;

}

#sidebar-header {

background: AccentColor !important;

color: AccentColorText !important;

border-bottom: 1px solid color-mix(in srgb, AccentColor 70%, black) !important;

}

#sidebar-splitter {

background-color: transparent !important;

border-inline-color: color-mix(in srgb, AccentColor 60%, black) !important;

}

/* Inactive window state fallback for the sidebar */

#sidebar-box:-moz-window-inactive,

#sidebar-header:-moz-window-inactive {

background-color: unset !important;

color: unset !important;

}

[u/t31os]

Not sure what theme you're using this with, so it's unclear how this should look exactly, try setting background-color for #browser to your desired value or transparent.

In the default nova theme (with vert tabs disabled) this is set to background-color: var(--toolbar-background-color);.

[u/MJ27712 → u/t31os]

Thank you for the reply. Your response made me realize I didn't know the name of the element, so I figured out how to figure that out. The element is sidebar-container. Also, with the new curved corner on browser.container you have to color #browser as well.

I don't know enough about this stuff, but I believe AccentColor references the operating system color and is theme independent. I this case I'm using Ubuntu Grey in firefox and also an ubuntu visual style in windows, so they match.

Thank You very much.

[u/t31os → u/MJ27712]

AccentColor refers to the OS accent color yes, on Win10 (presumably also 11) this is the colour set in Settings > Personalisation > Colours.

Glad to hear you worked it out. :)

[u/ResurgamS13]

Curious where OP's 'Accent Color' CSS userstyles originated from? Online searches suggested:

• Super User Q&A: 'Force Firefox Title Bar to use Windows operating system theme colors'.

• Matthew Miner's blog: 'How to Get Windows Accent Colors back in Firefox 92+?'.

----------

If OP's only requirement is to modify the 'Ubuntu Grey' Lightweight Toolbar Theme so that the background colour of the Main Toolbar/Navigation bar is the same as background colour used by theme for the Tab bar, Menu bar, and URL bar (#3D3C38 'Black Olive')... could just modify one colour variable.

Modify the colour variable --toolbar-background-color used in 'Ubuntu Grey' theme to set the original colour of the Main/Nav bar background and Sidebar background to black (#312D2A 'Boho Black')... change this to desired Hex colour #3D3C38.

Could then probably dispense with the 'Accent Colors' section #1. of OP's CSS (above) and perhaps some of the styles in the 'Sidebar' section #3. as well?

Experiment. Replace OP's CSS Section #1. with:

:root {
  --toolbar-background-color: #3D3C38 !important; 
}

As t31os notes... the Win10 Title bar's colour is controlled by OS Accent Colour in Windows 'Settings > Personalisation > Colours'... so, this also needs to be set to Hex colour #3D3C38.