更改颜色导航栏标题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>

但我的问题是当我想使用自定义颜色时。 有人知道如何解决它？ 非常感谢。

最好的问候。

Answer 1

根据您是否只想在一个页面中更改颜色，或者您想要在应用中的所有页面中更改颜色，还有两种方法：

1）在单页/视图中更改

就像你可以看到here

一样

  

要更改主题，只需调整您的$colors地图即可   src/theme/variables.scss档案：

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

Answer 2

最好覆盖variables.scss文件中的离子变量

因此，您可以创建自定义颜色变量

 $new-color:#55acee;

然后将其传递给离子变量

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

你可以找到所有的离子变量here