更改 ionic 中所有页面的导航栏颜色答案

【问题标题】：Change NavBar color for all the pages in ionic更改 ionic 中所有页面的导航栏颜色
【发布时间】：2018-03-12 08:55:25
【问题描述】：

我是 ionic 新手，想学习它。我的问题是如何更改 ionic 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">

【问题讨论】：

标签： ionic-framework ionic3 navbar

【解决方案1】：

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

$toolbar-background: #3D9BDD;

【讨论】：

如何改变导航栏文字颜色？
在我的例子中，此参数还将文本 color 设置为背景颜色。两个属性具有相同的颜色。 background 和 color。结果是不可见的文本。如果未设置组件的颜色。 -.- 是否还有文本颜色变量？顺便提一句。没有关于此的文档。我必须检查来源。好的，我找到了$toolbar-text-color。但未测试。就我而言，有些事情很奇怪。 ...

【解决方案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;

【讨论】：

【解决方案3】：

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

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

【讨论】：