[SOLVED][ionic-v4] How to change ion-tabbar active tab color


#1

Hello, I’m using ionic4.beta11.

I want to change the color of the active tab. I found that the css variable is --color-selected in the component ion-tabbar. This variable is taking the color from var(--ion-tabbar-text-color-active, #488aff). Overriding --ion-tabbar-text-color-active in the :root works.
The problem is when using a theme color, my case primary. This overrides the variable to --color-selected: var(--ion-color-contrast) where color contrast is taken from the ion-color-primary variables.

I just need to change one css variable, but I can’t do it. I’m forced to use it.

How can I tell or where I can add
ion-tabbar.ion-color { --color-seleted: var(--ion-tabbar-text-color-active); }

The solution would be to override the --color-selected just for the ion-tabbar element.

I tried adding this after the :root definitions, but it didn’t work.


#2

:root {
–ion-tabbar-text-color-active: #yourColor;
}

This is probably what you want in your global.scss.


#3

Hi, Thanks for the response. I tried that before. Let me explain the problem in more details.

If you add color=“primary” in the , the var –ion-tabbar-text-color-active: is overridden:

With color=“primary”:

.tab-btn-selected, .tab-btn:hover {
color: var(–color-selected);
}

–color-selected: var(–ion-color-contrast);

.ion-color-primary {
–ion-color-contrast: var(–ion-color-primary-contrast, #fff) !important;
}

Without color=“primary”, setting the var –ion-tabbar-text-color-active works:

.tab-btn-selected, .tab-btn:hover {
color: var(–color-selected);
}

–color-selected: var(–ion-tabbar-text-color-active, #488aff);

The solution would be to define more variables inside the ion-color-, like --ion-tabbar-text-color-active;


#4

Having the exact same problem.

The solution would be to do something like:

ion-tabbar {
	--ion-color-primary: #fff;
}

But because of the new shadow dom this is not applied… You can override it for ion-tab but then the override takes effect on the tab content as well!! Frustrating. There is a hacky way where you can inject your own CSS inside shadow DOM but that is not intended behavior. Ionic should expose a different variable than --ion-color-primary for the primary color or allow us to override ion-tabbar variables (since they want to go down that path)


#5

Same here.

Ideally you would bubble up the tabbar related --vars

ion-tabs{
   --ion-tabbar-background-color: #1c1c21;                      // already exists
   --ion-tabbar-color: rgba(var(--ion-text-color-rgb), 0.4);    // suggested
   --ion-tabbar-color-selected: var(--ion-text-color);          // suggested
}

#6

Workaround for now, omit “color=” attrib from ion-tabs tag and overwrite:

ion-tabs {
    --ion-tabbar-background-color: #1c1c21;
    // TODO: remove hack:
    --ion-tabbar-text-color: rgba(var(--ion-text-color-rgb), 0.4) !important;
    --ion-color-primary: var(--ion-text-color) !important;
}

#7

I’m closing this because the nice tabs refactor in beta.15 solved the problems.