Question

我是离子新手，想要学习它。我的问题是如何更改离子3中所有页面的导航栏颜色。

我一直在使用以下代码

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

有没有办法更改所有页面的导航栏颜色，而不是手动执行<ion-navbar color="primary">

Answer 1

将以下行添加到variables.scss文件中以全局更改颜色。

$toolbar-background: #3D9BDD;

Answer 2

这可以实现不同的方式，我将向您展示2路

第一种方式

在 variables.scss 文件 $ colors 部分添加customColor

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

Answer 3

如果有人在寻找使用动态主题的解决方案，则可以在Ionic 3中使用css更改文本颜色，

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

更改离子中所有页面的NavBar颜色

3 个答案: