[4.0.0-beta 8] ion-tab color doesn't take primary color in android

[marticrespi]

Bug Report

Ionic Info

   ionic (Ionic CLI)          : 4.1.1 (C:\Users\XXXX\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.8
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Describe the Bug
In md mode, the ion-tab color doesn't take the primary color as selected tab color. However in ios it's working well.

Steps to Reproduce
Only change the chrome debugger profile to some device with md and ios.

Related Code

theme/variables.scss

  /** primary **/
  --ion-color-primary: #f185cf;
  --ion-color-primary-rgb: 72,138,255;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #E359B8;
  --ion-color-primary-tint: #E359B8;

tabs.component.html

<ion-tabs>
  <ion-tab icon="home" href="/tabs/(home:home)" tabsHideOnSubPages="false">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="card" color="primary" href="/tabs/(offers:offers)" tabsHideOnSubPages="false">
    <ion-router-outlet name="offers"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="heart" color="primary" badge="{{$numItemsInWishList > 0 ? $numItemsInWishList : '' }}"
      href="/tabs/(wishlist:wishlist)" badgeColor="dark" tabsHideOnSubPages="false">
    <ion-router-outlet name="wishlist"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="basket" color="primary" badge="{{$numItemsInCart > 0 ? $numItemsInCart : '' }}" 
      href="/tabs/(cart:cart)" badgeColor="dark" tabsHideOnSubPages="false">
    <ion-router-outlet name="cart"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="contact" color="primary" href="/tabs/(profile:profile)" tabsHideOnSubPages="false">
    <ion-router-outlet name="profile"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Expected Behavior
In md mode should take the primary color as expected.

Additional Context
IOS:

MD:

[jytx]

You can change the variable like: --ion-tabbar-text-color-active : #f185cf;
Then it will be changed

[marticrespi]

Thanks @jytx, I know how to change it, but I have reported because for me it is not the expected behaviour that in one mode changes and with the other not.

[paulstelzer]

@marticrespi The developers wrote this next to the iOS Tabbar color: "// TODO fallback $tabbar-text-color-active"

So I think they will make the ios mode to the md mode (and so you have to change --ion-tabbar-text-color-active as @jytx wrote

[marticrespi]

Ok, we will have to declare or specify it for both modes,

Thanks!

[crebuh]

Similar issue for me, it works for md, but not for iOS. Any idea how to fix it?

[brandyscarney]

This is still an issue in 4.0.0-beta.13. This is because the default for md is:

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

where iOS uses:

$tabbar-ios-text-color-active:                      ion-color(primary, base);

I will be looking into this.