如何改变离子2中离子头的背景颜色?

时间:2017-03-07 06:12:05

标签: css ionic-framework sass ionic2 ionic3

如何更改标题颜色?我试过下面但没有成功

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

4 个答案:

答案 0 :(得分:41)

如果您想要在主题文件夹下/下的variables.scss中进行全局更改:

$toolbar-background: blue;

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

答案 1 :(得分:17)

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

您可以在src / theme / variable.scss中设置自定义颜色,如下所示:

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

我希望这对你有用

答案 2 :(得分:7)

检查the official docs。 有color属性从$colors地图中获取密钥。

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

答案 3 :(得分:4)

设置颜色如下:

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