Ionic - 9.8 Styliser une barre d'outils Ionic avec les variables CSS

Ionic applique des couleurs à ses composants grâce à des variables CSS. Cette leçon montre comment colorer la barre d'outils d'une page, puis l'ensemble des barres de l'application. Elle explique aussi la couleur de contraste, qui garde le texte lisible.

Colorer une seule barre d'outils

Un premier réglage passe par l'attribut color de la barre d'outils, avec la valeur primary. Ionic adapte alors automatiquement la couleur du texte pour qu'elle contraste avec le fond, ici en blanc.

Ce réglage ne concerne que la barre de la page où il est posé. Les autres barres de l'application gardent leur apparence par défaut.

Appliquer la couleur à toutes les barres

La documentation Ionic, dans la catégorie des thèmes, liste les variables que Ionic reconnaît. La vidéo retient celles de la barre d'outils : la couleur de fond et la couleur du contenu.

Dans le fichier de styles global, ces variables se placent dans le sélecteur root. La fonction var permet de réutiliser la variable primary, afin qu'un changement de couleur primaire se répercute. Une valeur de secours peut suivre la variable, après une virgule.

Sans la couleur de contraste, le texte ne reste pas blanc. Après rechargement, toutes les barres prennent la couleur voulue, avec un texte lisible.

:root {
  --ion-toolbar-background: var(--ion-color-primary);
  --ion-toolbar-color: var(--ion-color-primary-contrast);
}

Surcharger la couleur sur une page

Une couleur secondaire posée sur une page, par exemple sur la page d'authentification, s'applique par-dessus les variables globales. La page garde donc sa couleur propre.

En résumé

Les variables CSS de la barre d'outils se déclarent dans le sélecteur root. La fonction var réutilise la couleur primary, et la couleur de contraste garde le texte lisible. Une couleur posée sur une page l'emporte sur le réglage global. La leçon suivante ajoutera des règles CSS personnalisées.

Points clés

• L'attribut color applique une couleur à une seule barre d'outils.
• Les variables de barre d'outils se déclarent dans le sélecteur root.
• La fonction var réutilise une variable existante, comme la couleur primary.
• La couleur de contraste garde le texte lisible sur le fond coloré.
• Une couleur posée sur une page l'emporte sur le réglage global.

Questions fréquentes

Pourquoi utiliser var plutôt que copier la couleur ?

Une copie reste figée, alors que var suit la variable d'origine. Si la couleur primary change, la barre d'outils change aussi.

À quoi sert la valeur après la virgule dans var ?

C'est une valeur de secours, utilisée si la variable n'est pas lue correctement. La vidéo la présente comme une sécurité.

Pourquoi le texte devient-il blanc ?

Ionic choisit une couleur de contraste adaptée au fond. Pour la barre d'outils, la variable de couleur du contenu prend ce rôle.