当应用程序位于 Ionic 3 的抽屉中时如何更改应用程序导航栏颜色

Question

当应用程序在抽屉中时，我需要更改应用程序导航栏的颜色。

我尝试了状态栏插件，但它只会在应用程序在屏幕上打开时更改状态栏的颜色。

this.statusBar.overlaysWebView(false);
this.statusBar.backgroundColorByHexString('#e13c31');

和

<preference name="StatusBarBackgroundColor" value="red" />
<preference name="StatusBarOverlaysWebView" value="true" />

我想将 Hrythm 应用程序的导航栏颜色更改为红色，例如消息应用程序有自己的颜色，即蓝色。

Answer 1

1.****离子 3

.toolbar-background {
  background-color: blue;
}

2.****旧版本

<ion-navbar *navbar primary></ion-navbar>
<ion-navbar *navbar secondary></ion-navbar>
<ion-navbar *navbar danger></ion-navbar>

3. 在 variable.scss 我添加了属性作为 navbarColor: #009688

$colors: (
  primary:     #387ef5,
  secondary:   #32db64,
  danger:      #f53d3d,
  light:       #f4f4f4,
  dark:        #222,
  favorite:    #69BB7B,
  navbarColor: #009688
);

并添加到我的 home.html 离子导航栏元素中。

<ion-navbar color='navbarColor'></ion-navbar>

4. 使用 Ionic 2 rc2 我们可以使用以下变量来更改工具栏外观：

$toolbar-background
$toolbar-border-color
$toolbar-text-color
$toolbar-active-color
$toolbar-inactive-color

5.

<ion-navbar no-border-bottom [color]="isAndroid ? 'primary' : 'light'">

6.

<ion-navbar color="primary">
    <ion-title>Not Delivered Details</ion-title>
    <ion-buttons end>
    </ion-buttons>
</ion-navbar>

Answer 2

在花了很多时间搜索这个问题后，我终于找到了解决方案。当应用程序在抽屉中时，我使用 "Header Color" 插件更改 header 的颜色。

https://ionicframework.com/docs/v3/native/header-color/

当应用程序位于 Ionic 3 的抽屉中时如何更改应用程序导航栏颜色

How to change app navbar color when app is in drawer in Ionic 3

ionic-framework

android-drawer

ionic3