html - 如何更改 ionic 标题的颜色？

Question

我尝试更改 ionic 2 中 ionic 标题的颜色。

我有以下代码:

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

ion-title 的颜色不变。我尝试了几件事，例如:

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

第二个标题颜色正确，但标题很大。所以我在 variables.scss 中添加了这个:

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

但没有任何改变。有没有人有解决办法？或者我是否必须使用 p 或 h 标签来更改颜色？

Answer 1

从 ion-title 元素中删除 color="..." 并在您的 variables.scss 文件中使用此 sass 变量:

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

注意:

使用 just color 属性设置颜色自 3.0.0 版本的 Ionic 以来已被弃用 more info .

更新:

[...] 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?

您可以在 app.scss 文件中添加此样式规则(使其成为全局文件)，它只会更改标题而不会更改其他内容:

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