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

Question

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

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

<ion-navbar  *navbar> 

因此背景当前是灰色的（默认）

Answer 1

from ionic 2你可以在你的src / theme / variables.scss文件中添加自定义样式

然后将课程添加到您想要的地方

现在看结果

参考：Theming your Ionic App

Answer 2

导航栏有自己的风格。所以你需要覆盖它。

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

Answer 3

对于Ionic 2：try this

离子1你可以用这种方式做。 看这里：Ionic header

其他方式

css：

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

HTML：

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

希望这对你有所帮助。

Answer 4

现在（rc4）正确的方法是更改​​/src/themes/variables.scss文件，然后添加：

$toolbar-background: blue;

这有效地改变了使用值的颜色。更多信息here

Answer 5

这有效：

<ion-navbar secondary *navbar>

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

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

我从以下文章中了解到这一点：A Guide to Styling an Ionic2 Application。

Answer 6

我在导航栏中使用颜色属性作为以下内容找到标题的解决方案：

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

对于侧面菜单工具栏背景，转到variables.scss文件并添加以下代码：

$toolbar-background: $primary;

Answer 7

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

也可能是次要等，或scss中的其他颜色。

Answer 8

不幸的是，这似乎不再适用于最新版本的Ionic2（截至10/25/16 - 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;
}

Answer 9

这是我在ionic2论坛上找到的答案，它对我有用：

更改导航栏标题背景颜色Ionic 2： https://forum.ionicframework.com/t/change-navbar-header-background-colour-ionic-2/48498