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

Question

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?

Answer 1

Remove the color="..." from the ion-title element and use this sass variables in your variables.scss file:

$toolbar-md-title-text-color: #777;
$toolbar-ios-title-text-color: #777;
$toolbar-wp-title-text-color: #777;

If you want to use one the colors included in the named color variables

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,

  ...

  custom:     #777
);

You can do it by using map-get like this:

$toolbar-md-title-text-color: map-get($colors, custom);
$toolbar-ios-title-text-color: map-get($colors, custom);
$toolbar-wp-title-text-color: map-get($colors, custom);

Note:

Setting the color with just the color attribute has been deprecated since the 3.0.0 version of Ionic more info.

Update:

[...] all the element on the navbar change color, Can we just change the ion-title? Or have a second variable to change the other elements?

You can add this style rule in the app.scss file (to make it global) and it will only change the title and nothing else:

.toolbar-title.toolbar-title-md, 
.toolbar-title.toolbar-title-ios, 
.toolbar-title.toolbar-title-wp { color: map-get($colors, custom); }