css – 更改颜色导航栏标题Ionic 2

我有这个问题…我的颜色现在是白色的,我的代码是这样的：

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

但我的问题是当我想使用自定义颜色时.
有人知道如何解决它？
提前致谢.

最好的祝福.

解决方法

有两种方法可以执行此操作,具体取决于您是只想在一个页面中更改颜色,还是要在应用程序的所有页面中更改颜色：

1)在单页/视图中更改它

就像你可以看到here

To change the theme,just tweak the $colors map in your
src/theme/variables.scss file:

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

编辑

Hi,how can I add gradient in 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%);
    }
}