Styling the Selected Tab Title selected-indicator

[Dirk_Vandervoort]

I would like to style this, the line selected-indicated under my tab title :  It's the selected-indicator (available in the shadow DOM of a calcite-tab-title). I'd sure like to get that to be the same color as the table tile background color. Here is one of my attempts:

Calcite Tab Selected Indicator

As near as I can tell it's --calcite-color-brand, but I gat figure out how to override it.

Can you help please?

[KittyHurley · Accepted solution]

Hi @Dirk_Vandervoort it looks like you are using a beta version of Calcite, but in the latest 2.13 version you can alter the --calcite-color-brand variable on the component like so: https://codepen.io/geospatialem/pen/WbeoGBw 

In Calcite's upcoming 3.0 release in early 2025 the team is introducing the --calcite-color-focus variable, so you can adjust the focus color in coordination with the component's coloring.

#custom-tab-nav {
  --calcite-color-brand: #FF0000;
}