如何更改 ion-title 的颜色？

Question

我尝试改变 ionic 2 中 ion-title 的颜色。

我有以下代码：

<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>

第二个标题颜色正确，但 header 很大。所以我在 variables.scss:

中添加了这个

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

但是什么都没有 change.Does 谁有解决方案？或者我是否必须使用 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);

注：

使用 设置颜色只是 color 属性自 Ionic more info.

3.0.0 版本以来已被弃用

更新：

[...] 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); }

Answer 2

我知道这个问题已经得到解答，但是另一种设置标题文本颜色的方法是在 variables.scss 文件中，

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



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

base 将是您的背景颜色，contrast 将是您的 text/icon 颜色

Answer 3

作为一种替代方法，可以使用如下方式：

ion-toolbar { --color: #940000 }

根据需要设置颜色；放入 *.scss 文件。

尽情享受吧！

如何更改 ion-title 的颜色？

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

html

sass

ionic-framework

ionic2

ionic3