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

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.

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

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

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;

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)

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
}

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;
}
2 Likes

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

jawaban nya yang mana woy

ion-tab-button {
–color-selected: var(–ion-color-calm);
}

:root {
  ion-tab-button.tab-selected {
    ion-icon, ion-label {
      color: var(--ion-color-secondary) !important;
      --ion-color-base: var(--ion-color-secondary) !important;
    }
  }
}

I ended up with this approach that worked for me

11 Likes

This worked for me - thanks.

nice … thats worked for me

This helped me very mach. Thank you.

Hi
1-add ion-no-padding on ion-tab-button in html file
<ion-tab-button class=“ion-no-padding” tab=“partner-message”>


2-add css color when focus

ion-tab-button {
ion-icon {
width: 100%;
height: 100%;
}
}

ion-tab-button:focus {
ion-icon {
color: var(–ion-color-tertiary) !important;
–ion-color-base: var(–ion-color-tertiary) !important;
}
}

Just what I needed. Thanks a lot

1 Like