Change the background color of the active tab

[pjaguilar]

Hi everybody, i'm using the Color Firefox Addon, and the Custom colors work ok, but trying to change the color of the active tab, the "Tab Selected" variable doesn't work.

I've tried to add this to userchrome.css:

#tabbrowser-tabs .tabbrowser-tab[selected="true"] {
background: #D2FFDC !important;
}

and this

.tab-background[selected] {
background-color: var(--tab-background-color-selected) !important;
}

But it didn't work.

Where can i modify / add in leptonchrome.css to change only this variable?

Thank you very much in advance!!!!

[croxln]

The reason this happens is that Lepton applies a �ackground-image gradient to .tab-background[selected] when using lightweight themes (like Firefox Color) so the active tab blends into the toolbar background. Because that gradient is set with !important, setting just �ackground-color gets painted over, and targeting #tabbrowser-tabs .tabbrowser-tab directly won't work since the tab background is drawn on .tab-background.

You can override it by resetting the background image and setting the color directly on .tab-background:

css .tab-background:is([selected], [multiselected]) { background-image: none !important; background-color: #D2FFDC !important; }

Adding that to your userChrome.css will remove the Lepton gradient overlay and let your #D2FFDC background color show through.

[pjaguilar]

THANK YOU VERY MUCH!!!

For the answer and the explanation, thank you!!!

Worked like a charm 🙂🙂🙂