2
votes

Comment changer la couleur de la barre d'outils dans Ionic 4

Je travaille dans mon application Ionic 4 et je souhaite modifier la couleur d'arrière-plan de la barre d'outils, mais cela ne fonctionne pas.

J'ai essayé:

ion-toolbar {
    --background: #f2f2f2;
}

ion-toolbar {
    background: #f2f2f2 !important;
}

Comme:

couleur: var (- ion-couleur-contraste);

où définir le --ion-color-contrast . Dans le fichier variables.scss ou ailleurs pour changer la couleur.

Quelqu'un peut-il m'aider comment définir les variables dans le variables.scss pour changer les couleurs dans Ionic 4 .

ionic-framework ionic4

3 commentaires

vérifiez cette stackoverflow.com/questions/43910108/…

@Hrishi. Pouvez-vous s'il vous plaît m'aider avec une explication appropriée?

vérifier la réponse donnée par TheAppchemist sur le lien ci-dessus

3 Réponses :

8
votes

Cela devrait fonctionner:

// global.scss
ion-toolbar {
  --background: #f2f2f2;
}

Je viens de le confirmer sur mon environnement, ce n'est pas si évident avec cette couleur car elle est assez claire alors essayez-la avec quelque chose de plus sombre comme bleu code > juste pour vous assurer que cela change.

Consultez la documentation

Les couleurs sont définies dans le fichier theme / variables.scss , vous pouvez utiliser ce pratique generator pour aider à créer le css que vous pouvez ensuite simplement copier et coller dans le fichier variables.scss , puis référencer les couleurs en utilisant var (- ion -couleur-primaire); .

0 commentaires

6
votes

HTML:

changeToDarkColor() {
    this.dynamicColor = 'dark';
}

Définissez la couleur dans votre fichier variables.scss

private dynamicColor: string

constructor() {
   this.dynamicColor = 'light';
}

Dans votre fichier .ts, vous pouvez initialiser votre " dynamicColor "à la couleur par défaut

$colors: (
   blue:    #387ef5,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,  
   dark:          #222 
);

Vous pouvez changer la couleur en appelant la fonction

<ion-toolbar [color]="dynamicColor"></ion-toolbar>

0 commentaires

4
votes

ionic 4 variable.scss:

.my-toolbar{
    --background: var(--ion-color-primary);
}

pour la page personnalisée:

<ion-toolbar color="primary">

pour le CSS personnalisé:

--ion-toolbar-background: var(--ion-color-primary);
--ion-toolbar-color: var(--ion-color-light);

0 commentaires