如何在Ionic 2中更改导航栏的背景颜色？

Question

我正在尝试在Ionic 2中更改导航栏的背景颜色。 我已经尝试了很多方法，比如使用class =“bar bar-stable”等。

现在我的代码看起来像这样：

<ion-navbar  *navbar> 

所以当前的背景色是灰色（默认）

- Tyler Ruby

Answer 1

从Ionic 2开始，您可以在src/theme/variables.scss文件中添加自定义样式。

然后在您想要的位置添加类

现在看结果。

参考: 主题化您的Ionic应用程序

- Sanjoy Kanrar

---

这很好，但需要在所有ion-nav标签上添加color="custom-color"。 - Pierrick Martellière

下面 @veljkoz 的回答更加方便。 - Pierrick Martellière

Answer 2

导航栏拥有自己的样式，因此您需要覆盖它。

.toolbar-background {
  background-color: #0c60ee;
}

- CESCO

---

这应该是这个问题的正确答案。 - Chathuranga Silva

这个代码是可以运行的，但是在尝试时它会改变工具栏的文本颜色。 - Pierrick Martellière

这个放在哪里最好？ - The Onin

Answer 3

对于Ionic 2：请尝试这个链接。

对于Ionic 1，您可以按照以下方式进行操作。请参考：Ionic header。

另一种方法：

CSS:

.theme-color {
background-color: ##009688 !important;
color: #ffffff;}

html:

   <ion-nav-bar class="theme-color"><ion-nav-bar>

希望这对您有所帮助。

- the_mahasagar

Answer 4

目前（rc4），正确的做法是更改/src/themes/variables.scss文件，并添加：

$toolbar-background: blue;

这实际上会改变值所用的地方的颜色。更多信息请点击此处。

- veljkoz

---

实际上，工具栏还有许多其他属性，例如 $toolbar-background $toolbar-border-color $toolbar-text-color $toolbar-active-color $toolbar-inactive-color。 - kosiara - Bartosz Kosarzycki

Answer 5

我在导航栏中使用颜色属性来解决标题的问题，代码如下：

<ion-header><ion-navbar color='primary'> ... </ion-navbar> </ion-header>

要更改侧边菜单工具栏的背景，请前往variables.scss文件并添加以下代码：

$toolbar-background: $primary;

- Monty Al Mohaisen

Answer 6

这个可以工作：

<ion-navbar secondary *navbar>

在app/theme目录下的app.variables.scss中有一些预定义的变量：

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

我从以下文章中得到了这个想法： Ionic2 应用程序样式指南。

- srihari

Answer 7

很遗憾的是，这在最新版本的Ionic2中不再起作用（截至2016年10月25日-ionic-version=2.1.4），具有以下package.json依赖项：

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.2.3",

为了解决这个问题，我不得不将以下内容添加到 app.scss 中：

.toolbar-background {
  background-color: blue;
}

- Russ

Answer 8

<ion-nav-bar primary></ion-nav-bar>

也可以是次要的，等等，或者来自scss的其他颜色。

- Dan Bucholtz

---

谢谢你，丹，我很感激！ - Tyler Ruby