web-dev-qa-db-fra.com

Changer la couleur de la barre de navigation pour toutes les pages en ionique

Je suis nouveau en ionique et je veux l'apprendre. Ma question est de savoir comment changer la couleur de la barre de navigation pour toutes les pages de ionic 3. 

J'ai utilisé le code suivant

<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>

Est-il possible de changer la couleur de la barre de navigation pour toutes les pages au lieu de le faire manuellement <ion-navbar color="primary"> 

ionic-frameworkionic3navbar
5
Riddhi

Ajoutez la ligne suivante au fichier variables.scss pour modifier globalement la couleur.

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

Cela peut réaliser différemment, je vais vous montrer 2 façons

Première façon

Dans variables.scss fichier $ couleurs portion ajoute couleurCouleur 

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

Ici la base est la couleur de fond et le contraste est la couleur du texte

Et changer dans le fichier .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>

Deuxième voie

remplacer la couleur de la barre d'outils Couleur par défaut

$toolbar-background: #00953B;
1
Utpaul

Si quelqu'un cherche une solution utilisant des thèmes dynamiques, il est possible de changer la couleur du texte en utilisant css comme ceci dans Ionic 3:

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