How can I change the color of the ion-title?

Viewed 21990

I try to change color of the ion-title in ionic 2.

I have this following code:

<ion-header>
  <ion-navbar>
   <ion-title primary>Title</ion-title>
  </ion-navbar>
</ion-header>

The color of the ion-title don't change. I try several things like:

<ion-title color="primary">Title</ion-title> 
<ion-title> 
    <p primary>Title</p>
</ion-title>

With the second I have the title in the right color, but the header is big. So I add this in the variables.scss:

$toolbar-ios-height: 5rem; // ios
$toolbar-md-height: 5rem;  // android

But nothing change.Does anyone have a solution? Or do I have to use the p or h tag to change the color?

3 Answers

As an alternative, one can use something like this:

ion-toolbar { --color: #940000 } 

Set the color as you wish; put in *.scss file.

Enjoy!

Related