toolbar title - multiple colors with same base and different contrast bug on android (md)

[charlouze]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/driftyco/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I want to use multiple title text color in my toolbar. I added my colors in the map with the same base but a different contrast color in order to use the color attribute on my toolbars. The title text color is always the one from the first value defined in the map.

Expected behavior:
It should be the contrast color defined for each color.

Steps to reproduce:

• create a ionic project
• add two color in the $colors map with the same base color but a different contrast color
• create two page with a toolbar using both colors
• see that it's always the constrast color of the first color defined

Related code:

• variables.scss

$colors: (
[...]
  greyYellow: (
    base:#49606e,
    contrast:#fbb636
  ),
  greyWhite: (
    base:#49606e,
    contrast:#fff
  ),
[...]
);

• page1.html

<ion-header>
  <ion-toolbar color="greyYellow">
    <ion-title>Page 1</ion-title>
  </ion-toolbar>
<ion-header>
<ion-content></ion-content>

• page2.html

<ion-header>
  <ion-toolbar color="greyWhite">
    <ion-title>Page 2</ion-title>
  </ion-toolbar>
<ion-header>
<ion-content></ion-content>

Other information:
I can try to do a PR if needed.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.2.0
    Cordova CLI      : 6.5.0 
    Ionic CLI        : 3.2.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.2.1
    @ionic/cli-plugin-ionic-angular : 1.2.0
    Cordova Platforms               : browser 4.1.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.10.3
    OS         : Linux 4.10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

[jgw96]

Hello, thanks for opening an issue with us. We are able to reproduce this locally and will look into it.

[brandyscarney]

Thanks for the issue! I released a nightly with a fix in it:

npm install --save --save-exact [email protected]

[charlouze]

Thanks for the quick fix !

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.