在不丢失导航控件的情况下更改默认导航栏的颜色

Question

<ion-view view-title="Title">
  <ion-content>
  Content Here
  </ion-content>
</ion-view>

上面的代码为我提供了 ionic 的默认视图，我需要更改标题的颜色以保持默认导航控制器（如菜单/后退图标），而不是如下定义新的标题栏。

<ion-view view-title="Title">
  <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

<ion-content>
 Content Here
</ion-content>
</ion-view>

有没有解决问题的干净方法？

Answer 1

对于 ionic 2，您可以更改导航栏的背景颜色，您可以添加自定义颜色 http://ionicframework.com/docs/v2/theming/theming-your-app/

<ion-header>
    <ion-navbar color="primary">
        <ion-title>Connection Bluetooth</ion-title>
        <ion-buttons end>
            <button (click) = "startScanning()" ion-button>
                <!--<ion-icon name="refresh-circle"></ion-icon>-->
                <!--SCAN-->
                <ion-icon name='refresh'  md="md-refresh"></ion-icon>

            </button>
        </ion-buttons>
    </ion-navbar>

</ion-header>

Answer 2

只需创建任何 css 类

.your-sample-class{
  background: #color-code !important
}

并以这种方式将此类添加到项目的导航栏中：

<ion-nav-bar class="bar your-sample-class" ></ion-nav-bar>

Answer 3

你可以添加这一行

<preference name="StatusBarBackgroundColor" value="#078ECD"/>

到文件 config.xml 来编辑状态栏面板的颜色

有一个插件：link

此外，如果您只想更改标题的颜色，请为您的 css/scss 添加这些行：

ion-header-bar {
  background-color: red;
}

或

.bar.bar-positive {
  background-color: red;
}

或其他 =)