How can I change the color of the name of the ion?

Question

I am trying to change the color of the ionic name in ionic 2.

I have the following code:

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

Color ion-titledoes not 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 correct color, but the title is large. So I add this to .scss variables:

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

But nothing has changed. Anyone have a solution? Or do I need to use a tag por hto change color?

Answer 1

Remove color="..."from the element ion-titleand use these sass variables in the file variables.scss:

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

,

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

  ...

  custom:     #777
);

, map-get :

$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);

:

color 3.0.0 Ionic .

Update:

[...] . ? ?

app.scss ( ), :

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

Answer 2

, , variables.scss,

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



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

, /