更改爱奥尼亚中所有页面的导航栏颜色

在变量中添加以下行。用于全局更改颜色的scss文件。

$toolbar-background: #3D9BDD;

这可以实现不同的方式,我将向您展示两种方式

第一条路

在里面 变量。scss公司 文件 $颜色 部分添加自定义颜色

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  customColor:(
    base: #00953B,
    contrast: #ffffff
  )
);

这里的底色是背景色,对比度是文本颜色

和变化。html文件

<ion-header>
  <ion-navbar color="customColor">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

第二种方式

替代默认颜色工具栏颜色

$toolbar-background: #00953B;

如果任何人正在寻找使用动态主题的解决方案,可以使用css更改文本颜色,如Ionic 3中所示:

.header .toolbar-title {
    color: #fff !important;
}