更改颜色导航栏标题 Ionic 2

Posted 2023-03-06

【中文标题】更改颜色导航栏标题 Ionic 2

【英文标题】：Change colour navbar header Ionic 2

【发布时间】：2017-01-05 08:21:27

【问题描述】：

我有这个问题...我现在的颜色是白色的，我的代码是这样的：

<ion-header >
  <ion-navbar>
    <ion-title>
      HELLO
    </ion-title>
  </ion-navbar>
</ion-header>

使用此选项更改颜色很容易（主要、次要、危险、浅色、深色）

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

但我的问题是当我想使用自定义颜色时。 有人知道我该如何解决？ 提前谢谢。

最好的问候。

【参考方案1】：

有两种方法可以做到这一点，具体取决于您是想仅在单个页面中更改颜色，还是希望在应用程序的所有页面中更改颜色：

1) 在单个页面/视图中更改它

就像你可以看到here

要更改主题，只需调整您的 $colors 地图 src/theme/variables.scss文件：

$colors: (
  // ...
  newcolor:    #55acee

)

然后在视图中使用它

 <ion-header>
      <ion-navbar color="newcolor">
        <ion-title>
          HELLO
        </ion-title>
      </ion-navbar>
 </ion-header>

2) 在所有页面/视图中更改它

在这种情况下，您需要在 variables.scss 文件中添加以下内容以覆盖 Ionic 的默认值：

$toolbar-ios-background: #55acee;
$toolbar-md-background: #55acee;
$toolbar-wp-background: #55acee;

---

编辑

您好，如何在 app/theme/app.variables.scss 中添加渐变？

您可以在src/theme/variables.scss 中添加要使用的颜色：

$header-first-color: #AAAAAA;
$header-last-color: #000000;

然后设置使用它的规则（如果要将其应用于每个页面，请在 app.scss 文件中，如果要将其应用于单个页面，请在 page-name.scss 文件中）：

ion-header 
    .toolbar-background 
        background: linear-gradient(135deg, $header-first-color 0%, $header-last-color 100%);
    

【讨论】：

非常感谢！！ :)

很高兴我能帮上忙 :)

嗯.. 对我来说，当我在 ion-navbar 中执行 newcolor 时它不会更新。我还清除了缓存。

@JohnAndrews 尝试使用<ion-navbar color="newcolor">，因为答案与 Ionic 的早期版本有关

您好，如何在 app/theme/app.variables.scss 中添加渐变？

【参考方案2】：

覆盖 variables.scss 文件中的 ionic 变量可能会更好

因此您可以创建自定义颜色变量

 $new-color:#55acee;

然后将其传递给离子变量

$toolbar-ios-background:($new-color);
$toolbar-md-background($new-color);
$toolbar-wp-background($new-color);

你可以找到所有的离子变量here