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

Posted 2023-03-06

【中文标题】如何更改离子 2 中离子头的背景颜色？ [复制]

【英文标题】：How to change the background color of ion-header in ionic 2? [duplicate]

【发布时间】：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
);

【参考方案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>

【讨论】：

对我有帮助，谢谢