Ionic - 9.4 Variables de thème globales dans Ionic

Par défaut, Ionic utilise un thème de base dont la couleur principale est le bleu. Pour adapter l'apparence à votre application, il faut modifier les variables de thème. Cette leçon explique comment elles fonctionnent et où les consulter dans la documentation.

Où se trouvent les variables

Les variables sont stockées dans le dossier des thèmes, dans un fichier de variables. Elles sont déclarées avec deux tirets devant leur nom, ce qui les distingue des variables CSS classiques.

Ce fichier contient les neuf couleurs fournies par Ionic. Les variables ne servent pas qu'aux couleurs : elles peuvent aussi stocker des marges ou des espacements.

Changer une valeur

Si l'on modifie la couleur principale, tous les composants qui utilisent cette couleur changent au rechargement de l'application. C'est le principe des thèmes : une seule valeur modifie plusieurs attributs.

Pour trouver toutes les variables disponibles, la documentation Ionic propose une partie avancée, dans la catégorie thème, avec la page des variables globales.

Tester avec une valeur visible

Pour tester, la vidéo applique un padding de 10 rem, une valeur volontairement grande. Au rechargement, ce padding apparaît dans toute l'application.

Il est donc facile d'appliquer une même valeur à l'ensemble d'une application Ionic.

En résumé

Les variables de thème globales se trouvent dans le fichier de variables du thème. Modifier une valeur met à jour tous les composants qui l'utilisent. La documentation Ionic liste les paramètres possibles.

Points clés

• Les variables de thème se trouvent dans le fichier de variables du dossier des thèmes.
• Elles sont déclarées avec deux tirets devant leur nom.
• Modifier une variable met à jour tous les composants qui l'utilisent.
• Les variables peuvent aussi contrôler des marges et des espacements.
• La documentation Ionic liste l'ensemble des paramètres disponibles.

Questions fréquentes

Pourquoi deux tirets devant les variables ?

Ces tirets distinguent les variables de thème d'Ionic des variables CSS classiques.

Peut-on stocker autre chose que des couleurs ?

Oui. Les variables peuvent aussi contenir des marges, des paddings ou d'autres valeurs.

Où voir la liste complète des variables ?

Dans la documentation Ionic, à la partie avancée de la catégorie thème, sur la page des variables globales.