Different Background Colors for Each Tabs Panel

[jldarling7]

Description

Is there a way to make the background color different for each tabs panel? If not, can I please make a feature request for this?

[SunnyZebra]

There doesn't seem to be an easy nice way.
Here a working but not pretty displaying version. These css selectors are roughly coloring the background using the same colors as the setting for the tabs panel icon color. Not sure if that is efficient, but could give an idea what css to look at to make more changes.

#root:has(.main-items>.nav-item[data-active="true"][data-color="blue"]){
	background-color:color-mix(in srgb, blue 50%, transparent);
} 
#root:has(.main-items>.nav-item[data-active="true"][data-color="turquoise"]){
	background-color:color-mix(in srgb, turquoise 50%, transparent);
} 
#root:has(.main-items>.nav-item[data-active="true"][data-color="green"]){
	background-color:color-mix(in srgb, green 50%, transparent);
} 
#root:has(.main-items>.nav-item[data-active="true"][data-color="yellow"]){
	background-color:color-mix(in srgb, yellow 50%, transparent);
} 
#root:has(.main-items>.nav-item[data-active="true"][data-color="orange"]){
	background-color:color-mix(in srgb, orange 50%, transparent);
} 
#root:has(.main-items>.nav-item[data-active="true"][data-color="red"]){
	background-color:color-mix(in srgb, red 50%, transparent);
} 
#root:has(.main-items>.nav-item[data-active="true"][data-color="pink"]){
	background-color:color-mix(in srgb, pink 50%, transparent);
} 
#root:has(.main-items>.nav-item[data-active="true"][data-color="purple"]){
	background-color:color-mix(in srgb, purple 50%, transparent);
} 

[jldarling7]

Thanks! This is pretty much exactly what I was looking for!

There is still a large bar that is the original background color around the new tab button. Is there a way to also make it the same color? Or at least reduce it?

[SunnyZebra]

These css classes need to be colored too: .new-tab-btns, .bottom-space.

Seems to work with css nesting.

#root:has(.main-items > .nav-item[data-active="true"][data-color="blue"]) {
	background-color: color-mix(in srgb, blue 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, blue 50%, transparent);
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="turquoise"]) {
	background-color: color-mix(in srgb, turquoise 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, turquoise 50%, transparent);
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="green"]) {
	background-color: color-mix(in srgb, green 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, green 50%, transparent);
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="yellow"]) {
	background-color: color-mix(in srgb, yellow 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, yellow 50%, transparent);
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="orange"]) {
	background-color: color-mix(in srgb, orange 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, orange 50%, transparent);
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="red"]) {
	background-color: color-mix(in srgb, red 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, red 50%, transparent);
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="pink"]) {
	background-color: color-mix(in srgb, pink 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, pink 50%, transparent);
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="purple"]) {
	background-color: color-mix(in srgb, purple 50%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color: color-mix(in srgb, purple 50%, transparent);
	}
}

[jldarling7]

That worked perfectly! Thanks so much!

[silverwings15]

These css classes need to be colored too: .new-tab-btns, .bottom-space.

Seems to work with css nesting.

@SunnyZebra seems to still have the issue @jldarling7 described unfortunately

[jldarling7]

@silverwings15 See how I fixed it in the attached screenshot. You have to make one of the transparencies 0% because they seem to stack on top of one another.

[silverwings15]

very cool, thank you. i'll look into playing around with custom images as well

[SunnyZebra]

nice catch. Since these classes are under #root you can simply set the background-color to transparent. No need to mix color. That was just a preference from myself for the toplevel root background, since named colors seems too bright.

Have color picked the hex colors from sidebery. Just green and pink seems a bit bright as fill color. Have dimmed them a bit, but have left the original hex color to try out yourself.

You can also use a default tab color with alpha to merge with the background color. rgba(0, 0, 0, 0.7) That is a default setting in sidebery changing #root.root {--tabs-normal-bg:;} (Styles → Tabs → Normal Background)

Here the updated styles.

#root.root {--tabs-normal-bg: rgba(0, 0, 0, 0.7);}

#root:has(.main-items > .nav-item[data-active="true"][data-color="blue"]) {
	background-color: #37adff;
	.new-tab-btns,
	.bottom-space {
		background-color: transparent;
	}
}

#root:has(.main-items > .nav-item[data-active="true"][data-color="turquoise"]) {
	background-color: #00c79a;
	.new-tab-btns,
	.bottom-space {
		background-color:  transparent;
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="green"]) {
	background-color: color-mix(in srgb, #51cd00 70%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color:  transparent;
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="yellow"]) {
	background-color: #ffcb00;
	.new-tab-btns,
	.bottom-space {
		background-color:  transparent;
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="orange"]) {
	background-color: #ff9f00;
	.new-tab-btns,
	.bottom-space {
		background-color:  transparent;
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="red"]) {
	background-color: #ff613d;
	.new-tab-btns,
	.bottom-space {
		background-color:  transparent;
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="pink"]) {
	background-color: color-mix(in srgb, #ff4bda 70%, transparent);
	.new-tab-btns,
	.bottom-space {
		background-color:  transparent;
	}
}
#root:has(.main-items > .nav-item[data-active="true"][data-color="purple"]) {
	background-color: #c071fc; 
	.new-tab-btns,
	.bottom-space {
		background-color: transparent;
	}
}