New color attribute is not working in header tag, .e.g <h1 color="primary"> when it is in some container, e.g Card

[bimal72]

Hello,
I have used color attribute as follows.

<ion-card  >            
            <ion-card-content style="line-height:1" padding-horizontal text-left>
              <h1 text-center margin-bottom style="font-weight:bold" color="primary" >DEALS</h1>           

It should display DEALS in primary color but it don't.
Its rendered html is

<ion-card class="card-md">
            <ion-card-content padding-horizontal="" style="line-height:1" text-left="">
              <h1 color="primary"  class="text-md text-md-primary" ng-reflect-color="primary">DEALS</h1>

But it renders dark color.

When I inspect its css rules

.card-md h1 {
    margin: 0 0 2px;
    font-size: 2.4rem;
    font-weight: normal;
    color: #222; //this is dark color it renders
}

.text-md-primary {
   color: #1f9bcc; // this is primary color - strikeout

}

As a workaround if I put DEAL label in

 <h1 text-center margin-bottom style="font-weight:bold" ><span color="primary">DEAL</span></h1>, 

it is working as desired
Please help me to implement correctly.

[bglaz]

This seems to happen everywhere. I have the same issue when applying color="primary" to a ion-item-divider. The base CSS rule background color overrides the CSS rule that is trying to apply the primary background color. I also tried <ion-item-divider primary> as the documentation suggests, but this doesn't even apply the class at all.

[NickStemerdink]

In addition, I noticed that (in my case on ion-navbar) the color is being extracted including quotes. Resulting in wrong attributes.

<ion-navbar color=”primary”>
will be:
<ion-navbar class="toolbar toolbar-ios toolbar-ios-”primary”" color="”primary”" ng-reflect-color="”primary”" ng-reflect-hidden="false">

In the other cases the css selector for the default colors is more specific and therefor taking priority.