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

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?

htmlionic-frameworksassionic2ionic3


Solution 1:[1]

I know this question has been answered, but an another way to set the text colour in the title is in the variables.scss file,

$colors: (
    calm: (
      base: #000,
      contrast: #ffc900
    ),
   etc..
);



<ion-navbar color="calm">
    <ion-title>Some Text</ion-title>
</ion-navbar>

base will be your background colour and contrast will be your text/icon colour

Solution 2:[2]

As an alternative, one can use something like this:

ion-toolbar { --color: #940000 }

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

Enjoy!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Thomas Degroot
Solution 2 Nowdeen

Related Questions