如何更改ionic 2中ion-header的背景颜色？

Question

如何改变header颜色？我在下面尝试但没有成功

 <ion-header>
  <ion-navbar danger>
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

我的variable.scss是：

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

Answer 1

像这样设置颜色：

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

Answer 2

勾选the official docs。有一个 color 属性，它从 $colors 映射中获取密钥。

<ion-header>
  <ion-navbar color="danger">
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

Answer 3

 <ion-header>
  <ion-navbar color="color3">
    <ion-title></ion-title>
  </ion-navbar> 
</ion-header>

you can set your custom color in src/theme/variable.scss like this :

$colors: (
  primary:    #8B4789,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  color1: #15c178,
  color2: #8B4789,
  color3 : #07904d,
  color4: #673665,
  brown: #B75E33,
  ycBlue: #638AF1
);

I hope this will work for you

Answer 4

如果您想在 variables.scss under/in 主题文件夹中进行全局更改：

$toolbar-background: blue;

对于所有参考 Ionic SASS 要覆盖的变量遵循此 link

如何更改ionic 2中ion-header的背景颜色？

How to change the background color of ion-header in ionic 2?

css

ionic-framework

sass

ionic2

ionic3