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

Question

我正在尝试改变Ionic 2中的导航栏背景颜色.我尝试了很多东西,比如class ="bar bar-stable"等

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

<ion-navbar  *navbar> 

所以背景当前是灰色的(默认)

Answer 1

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

然后将类添加到您想要的位置

现在看看结果

参考:主题你的离子应用程序

Answer 2

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

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

Answer 3

对于 Ionic 2：试试这个

在ionic 1中你可以这样做。看这里：离子标头

另一种方式

CSS：

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

html:

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

希望这对您有帮助。