如何更改离子 2 中离子头的背景颜色？ [复制]答案

【问题标题】：How to change the background color of ion-header in ionic 2? [duplicate]如何更改离子 2 中离子头的背景颜色？ [复制]
【发布时间】：2017-07-27 06:05:22
【问题描述】：

如何更改标题颜色？我在下面尝试了但没有成功

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

【问题讨论】：

标签： css ionic-framework sass ionic2 ionic3

【解决方案1】：

如果您想在主题文件夹下/中的variables.scss 中全局更改它：

$toolbar-background: blue;

对于所有要覆盖的参考离子 SASS 变量，请遵循 link

【讨论】：

这真的很有帮助！谢谢
@Pawan 当你全局设置它但是你想要一个不同颜色的页面/组件时，你可以把它放在它的.scss 文件.toolbar-background { background-color: #5381A7 !important; }
但这有什么需要在全局设置时颜色正在改变..你能解释一下吗？
我刚刚添加了一个信息...全局适用于所有页面/组件，但前提是您需要为页眉设置不同颜色的页面，因此您只需添加我的内容即可覆盖它在上面的评论中写道，如果需要的话，那就是……否则，全局更改它就可以了
您还可以在以下位置查看所有可能的 Ionic 变量：ionicframework.com/docs/theming/overriding-ionic-variables

【解决方案2】：

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

我希望这对你有用

【讨论】：

你是对的..
同样适用于ion-toolbar
太好了，这对我有帮助

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

这样设置颜色：

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

【讨论】：

对我有帮助，谢谢