web-dev-qa-db-ja.com

ionic）のすべてのページのナビゲーションバーの色を変更します

私はionicの初心者で、それを学びたいと思っています。私の質問は、ionic 3のすべてのページのナビゲーションバーの色を変更する方法です。

私は次のコードを使用しています

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

手動で<ion-navbar color="primary">を実行する代わりに、すべてのページのナビゲーションバーの色を変更する方法はありますか？

ionic-frameworkionic3navbar
6
Riddhi

次の行をvariables.scssファイルに追加して、色をグローバルに変更します。

$toolbar-background: #3D9BDD;
10
Ajantha Bandara

これは私があなたに2つの方法を示す異なる方法を達成することができます

最初の方法

variables.scss file $ colors部分にcustomColorを追加

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  customColor:(
    base: #00953B,
    contrast: #ffffff
  )
);

ここで、ベースは背景色で、コントラストはテキストカラーです。

そして.htmlファイルの変更

<ion-header>
  <ion-navbar color="customColor">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Hello Ionic</ion-title>
  </ion-navbar>
</ion-header>

2番目の方法

デフォルトのカラーツールバーの色を上書きする

$toolbar-background: #00953B;
1
Utpaul

動的テーマを使用した解決策を探している人は、次のようにcssを使用してテキストの色を変更できますIonic 3：

.header .toolbar-title {
    color: #fff !important;
}
0
der.marty