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

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

Author: Fantashit

1 thought on “toolbar title – multiple colors with same base and different contrast bug on android (md)

Comments are closed.