# Tab Container color

**URL:** <https://forum.inductiveautomation.com/t/tab-container-color/89963>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 6, 2024, 1:10pm UTC](https://forum.inductiveautomation.com/t/tab-container-color/89963 "2024-05-06T13:10:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mahsasalimi](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mahsasalimi/32/68520_2.png) [@mahsasalimi](https://forum.inductiveautomation.com/u/mahsasalimi)\
**Post date:** [May 6, 2024, 1:10pm UTC](https://forum.inductiveautomation.com/t/tab-container-color/89963/1 "2024-05-06T13:10:08Z")

</div>

Hi ,  
let's say I have a tab container .  
I want the active tab to have this blue color  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0613da097c693eda21ba00801a49377b8fe4a02.png)  
I have tried to find an attribute under the tabstyle-\>active to set that to blue without success.  
if I set the boarder color , it will look like the following

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f6d5afd4508488de7a59a115bc5aeb070cdb0080.png)

my question is , what sets this dark gray color above the blue boarder ?  
(in case you are wondering why it is dark gray , it is because I am using another theme than light)

thanks in advance

---

<div class="post-metadata">

**Author:** ![djs](https://avatars.discourse-cdn.com/v4/letter/d/e47774/32.png) [@djs](https://forum.inductiveautomation.com/u/djs)\
**Post date:** [May 6, 2024, 1:23pm UTC](https://forum.inductiveautomation.com/t/tab-container-color/89963/2 "2024-05-06T13:23:00Z")

</div>

In a browser, press F12, and then use the element picker. You can then see what styles are applied to that element.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/6/8611fc262257c8ac4df71b01fc69bc2257a595aa.png)  
In the top left corner, is the element picker tool. I clicked on an active tab. Examining the styles shows that IA are using box-shadow to get that grey bar.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 6, 2024, 1:26pm UTC](https://forum.inductiveautomation.com/t/tab-container-color/89963/3 "2024-05-06T13:26:15Z")

</div>

Hit F12 on your browser to open Developer Tools.  
Use the Inspect button to highlight the tab.  
Somewhere in the Styles window you'll see something like this:

```python
.ia_tabContainerComponent__tab--modern--active {
    font-weight: 500;
    color: var(--neutral-90);
    box-shadow: inset 0 -3px var(--border);
}

```

It's the `var(--border)` definition that's adding that.

The inspection gives the clue that we need to disable box-shadow.  
Try these settings:

```python
tabStyle.active.borderColor : --<your theme color variable>
tabStyle.active.borderWidth : 2 <or whatever>
tabStyle.active.boxShadow : none

```