Addon bars (horizontal and vertical) are white with Firefox Alpenglow lw-theme

[Janaue]

I use firefox ESR 128.2.0esr and I load the two scripts ./CustomJSforFx-master/scripts/addonbar.uc.js and ./CustomJSforFx-master/scripts/addonbar_vertical.uc.js to get addon bars, but with the official purple theme Firefox Alpenglow 1.4, the two bars are very white. Is it possible to change this in the userChrome.css ?

for instance to change the tab bar I use this
#TabsToolbar{background-color: #101010 !important}

So i hope i can do the same for the two addon bars. I have also the same problem wit the sidebar. It's very white so I would like to change it's color in the CSS.

[Aris-t2]

Alpenglow 1.4 does not offer any colors there, but you can change that manually by editing addonbar.uc.js and addonbar_vertical.uc.js files. Replace the mentioned code like this:

:root[lwtheme] #addonbar {
  background: var(--lwt-accent-color) !important;
 }

-->

:root[lwtheme] #addonbar {
  background: purple !important;
 }

:root[lwtheme] #addonbar_v {
   background: var(--lwt-accent-color) !important;
}

-->

:root[lwtheme] #addonbar_v {
   background: purple  !important;
}

[Speravir]

@Aris-t2: Shouldn’t it work, as well, to define --lwt-accent-color in the CustomCSSforFx config file or elsewhere in a userChrome.css (dependent) file?

@Janaue: Please, fix the typographic mistake in the title: Addon instead of Adon.

[Aris-t2]

@Speravir
Yes, it should, but it did not work in my tests with every theme.

[Aris-t2]

I'm closing this one here, because the issue is mainly about my project: https://github.com/Aris-t2/CustomJSforFx