Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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: 2018-09-12_10h57_03