cordova - Ionic 2 でナビゲーションバーの背景色を変更するにはどうすればよいですか?

Question

Ionic 2 でナビゲーション バーの背景色を変更しようとしています。class="bar bar-stable" など、多くのことを試しました。

現在、私のコードは次のようになっています。

<ion-navbar  *navbar> 

背景は現在灰色です（デフォルト）

Answer 1

ionic 2 から、src/theme/variables.scss ファイルにカスタム スタイルを追加できます。

そして、必要な場所にクラスを追加します

今すぐ結果を見てください

参照 : Ionic アプリのテーマ設定

Answer 2

navbar には独自のスタイルがあります。したがって、上書きする必要があります。

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

Answer 3

Ionic 2の場合：これを試してください

イオン1では、このようにすることができます。ここを見てください：イオンヘッダー

他の方法

css:

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

html:

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

これがお役に立てば幸いです。

Answer 4

ionic -version残念ながら、これは package.json に次の依存関係があるIonic2 の最新バージョン (10/25/16 の時点で - = 2.1.4) では機能しないようです。

    "@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;
}