Prise en charge des variables de couleur pour les icônes

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 3 minutes de lecture

    • Découvrez comment utiliser des variables de couleur pour modifier le thème dans les écrans de votre carte mobile

    Les icônes mobiles disposent d’une section Définir l’apparence qui lui est utilisée pour définir l’apparence de vos icônes. Utilisez l’option de style FontColorVariable pour utiliser une variable de couleur ou une couleur.

    À l’aide de ce style, vous pouvez définir n’importe quelle variable de couleur à partir de la table Propriétés du thème UX [sys_ux_theme_property]. Pour une liste des variables disponibles, consultez le guide de conception des couleurs ci-dessous.

    Pour plus de détails sur la création d’écrans de carte, reportez-vous à la section Configurer une section de l’interface utilisateur d’icône.

    Pour en savoir plus sur la création d’icônes dans Mobile, reportez-vous à la section Icônes Mobile.

    		 Variable de couleur utilisée dans une icône

    Guide des couleurs des icônes mobiles

    Les variables de couleur sont divisées en Utilisez les directives de conception pour identifier la variable de couleur adaptée à votre cas d’utilisation.

    Palette de couleurs d’alerte
    Les couleurs de la palette de couleurs des alertes mettent en évidence les états, états et tâches importants. Utilisez des couleurs d’alerte pour communiquer un sens spécifique plutôt que pour la décoration ou l’organisation.
    Palette de couleurs groupée
    Les couleurs de la palette de couleurs groupées suivent les conventions de couleur d’un secteur d’activité. Utilisez ces couleurs pour montrer que l’élément coloré est associé à un secteur d’activité ou à un secteur d’activité spécifique. La signification de chaque couleur dépend du contexte, mais doit rester cohérente dans votre application.

    Chaque couleur de support a trois options, dont une option évaluable. Envisagez d’utiliser l’option de couleur accessible pour les icônes qui ne contiennent pas de texte afin d’améliorer la navigabilité pour vos utilisateurs.

    Tableau 1. Palette de couleurs d’alerte
    Nom de la couleur Exemple Variables de couleurs
    Critique Icônes Mobile critiques
    Variables mobiles
    • Option 1 : alerte--critique-2
    • Option 2 : alerte--critique-3
    • Option 3 (accessible) : alerte--critique-4
    Variable Web
    • Option 1 :--now-color_alert--critical-2
    • Option 2 :--now-color_alert--critical-3
    • Option 3 (Accessible) :--now-color_alert--critical-4
    Élevé Icônes mobiles hautes
    Variables mobiles
    • Option 1 : alerte--élevée-2
    • Option 2 : alerte--élevée-3
    • Option 3 (accessible) : alerte--élevée-4
    Variable Web
    • Option 1 :--now-color_alert--high-2
    • Option 2 :--now-color_alert--high-3
    • Option 3 (Accessible) :--now-color_alert--high-4
    Avertissement Icônes mobiles d’avertissement
    Variables mobiles
    • Option 1 : alerte--avertissement-2
    • Option 2 : alerte--avertissement-3
    • Option 3 (accessible) : alerte--avertissement-4
    Variable Web
    • Option 1 :--now-color_alert--warning-2
    • Option 2 :--now-color_alert--warning-3
    • Option 3 (Accessible) :--now-color_alert--warning-4
    Modéré Icônes Mobile modérées
    Variables mobiles
    • Option 1 : alerte--modérée-2
    • Option 2 : alerte--modérée-3
    • Option 3 (accessible) : alerte--modérée-4
    Variable Web
    • Option 1 :--now-color_alert--moderate-2
    • Option 2 :--now-color_alert--moderate-3
    • Option 3 (accessible) :--now-color_alert--moderate-4
    Info Icônes mobiles d’informations
    Variables mobiles
    • Option 1 : alerte--info-2
    • Option 2 : alerte--info-3
    • Option 3 (Accessible) : alerte--info-4
    Variable Web
    • Option : 1--now-color_alert--info-2
    • Option 2 :--now-color_alert--info-3
    • Option 3 (Accessible) :--now-color_alert--info-4
    Positif Icônes mobiles positives
    Variables mobiles
    • Option 1 : alerte--positive-2
    • Option 2 : alerte--positive-3
    • Option 3 (Accessible) : alerte--positive-4
    Variable Web
    • Option 1 :--now-color_alert--positive-2
    • Option 2 :--now-color_alert--positive-3
    • Option 3 (Accessible) :--now-color_alert--positive-4
    Faible Icônes Mobile basse
    Variables mobiles
    • Option 1 : alerte--faible-2
    • Option 2 : alerte--faible-3
    • Option 3 (Accessible) : alerte--faible-4
    Variable Web
    • Option 1 :--now-color_alert--low-2
    • Option 2 :--now-color_alert--low-3
    • Option 3 (Accessible) :--now-color_alert--low-4
    Tableau 2. Palette de couleurs groupée
    Nom de la couleur Exemple Options de couleurs
    Bleu Icônes mobiles bleues
    Variable Web
    • Option 1 :--now-color_grouped--blue-2
    • Option 2 :--now-color_grouped--blue-3
    • Option 3 (Accessible) :--now-color_grouped--blue-4
    Marron Icônes marron des mobiles
    Variable Web
    • Option 1 :--now-color_grouped--brown-2
    • Option 2 :--now-color_grouped--brown-3
    • Option 3 (Accessible) :--now-color_grouped--brown-4
    Gris Icônes grises de Mobile
    Variable Web
    • Option 1 :--now-color_grouped--gray-2
    • Option 2 :--now-color_grouped--gray-3
    • Option 3 (Accessible) :--now-color_grouped--gray-4
    Vert Icônes mobiles vertes
    Variable Web
    • Option 1 :--now-color_grouped--green-2
    • Option 2 :--now-color_grouped--green-3
    • Option 3 (Accessible) :--now-color_grouped--green-4
    vert-jaune Icônes mobiles vert-jaune
    Variable Web
    • Option 1 :--now-color_grouped--green-yelow-2
    • Option 2 :--now-color_grouped--green-yelow-3
    • Option 3 (Accessible) :--now-color_grouped--green-yelow-4
    Magenta Icônes mobiles magenta
    Variable Web
    • Option 1 :--now-color_grouped--magenta-2
    • Option 2 :--now-color_grouped--magenta-3
    • Option 3 (Accessible) :--now-color_grouped--magenta-4
    Orange Icônes mobiles orange
    Variable Web
    • Option 1 :--now-color_grouped--orange-2
    • Option 2"--now-color_grouped--orange-3
    • Option 3 (Accessible) :--now-color_grouped--orange-4
    Rose Icônes de Mobile roses
    Variable Web
    • Option 1 :--now-color_grouped--pink-2
    • Option 2 :--now-color_grouped--pink-3
    • Option 3 (Accessible) :--now-color_grouped--pink-4
    Violet Icônes Mobile violettes
    Variable Web
    • Option 1 :--now-color_grouped--purple-2
    • Option 2 :--now-color_grouped--purple-3
    • Option 3 (Accessible) :--now-color_grouped--purple-4
    Clair Icônes mobiles bleu-vert
    Variable Web
    • Option 1 :--now-color_grouped--teal-2
    • Option 2 :--now-color_grouped--teal-3
    • Option 3 (accessible) :--now-color_grouped--teal-4
    Jaune Icônes mobiles jaunes
    Variable Web
    • Option 1 :--now-color_grouped--yellow-2
    • Option 2 :--now-color_grouped--yellow-3
    • Option 3 (Accessible) :--now-color_grouped--yellow-4