更改 Ionic 2 导航栏标题的颜色

Question

我有个问题... 我现在的颜色是白色，我的代码如下：

<ion-header >
  <ion-navbar>
    <ion-title>
      HELLO
    </ion-title>
  </ion-navbar>
</ion-header>

使用这个选项更改颜色很容易（主要，次要，危险，浅色，深色）。

<ion-header >
      <ion-navbar danger>
        <ion-title>
          HELLO
        </ion-title>
      </ion-navbar>
 </ion-header>

但我的问题是，当我想使用自定义颜色时，不知道该怎么解决。谢谢您提前的帮助。

最好的祝福。

- Tecnico

Answer 1

有两种方法可以做到这一点，基于您是想仅在单个页面中更改颜色还是想在应用程序的所有页面中更改颜色：

1) 在单个页面/视图中更改

就像您可以在这里看到的那样。

要更改主题，只需调整src/theme/variables.scss文件中的$colors映射：

$colors: (
  // ...
  newcolor:    #55acee

)

然后在视图中使用它

 <ion-header>
      <ion-navbar color="newcolor">
        <ion-title>
          HELLO
        </ion-title>
      </ion-navbar>
 </ion-header>

2）在所有页面/视图中更改它

在这种情况下，您需要在variables.scss文件中添加以下内容，以覆盖Ionic的默认设置：

$toolbar-ios-background: #55acee;
$toolbar-md-background: #55acee;
$toolbar-wp-background: #55acee;

---

编辑

您好，我该如何在app/theme/app.variables.scss中添加渐变？

您可以在src/theme/variables.scss中添加要使用的颜色：

$header-first-color: #AAAAAA;
$header-last-color: #000000;

然后设置一个规则来使用它（如果想将其应用于每个页面，则在您的app.scss文件中；如果想将其应用于单个页面，则在page-name.scss文件中）：

ion-header {
    .toolbar-background {
        background: linear-gradient(135deg, $header-first-color 0%, $header-last-color 100%);
    }
}

- sebaferreras

---

非常感谢！！ :) - Tecnico

很高兴能帮助到你 :) - sebaferreras

嗯... 对我来说，当我在ion-navbar中执行newcolor时，它没有更新。我还清除了我的缓存。 - WJA

尝试使用 <ion-navbar color="newcolor">，因为答案是针对以前的 Ionic 版本的。 - sebaferreras

你好，我该如何在app/theme/app.variables.scss中添加渐变？ - Arj 1411

Answer 2

建议在variables.scss文件中覆盖ionic变量，这样您就可以创建自定义颜色变量。

 $new-color:#55acee;

然后将其传递到Ionic变量中

$toolbar-ios-background:($new-color);
$toolbar-md-background($new-color);
$toolbar-wp-background($new-color);

您可以在此处找到所有的Ionic变量。

- user1752532