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

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

Les icônes mobiles disposent d’une section Définir l’apparence qui sert à 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 d’informations sur la création d’écrans de carte, reportez-vous à la section Configurer une section de l'interface utilisateur de type icône. Pour en savoir plus sur la création d’icônes dans Mobile, reportez-vous à la section Icônes Mobile.

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, les états et les 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é à une industrie 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 navigation pour vos utilisateurs.

Tableau 1. Palette de couleurs d’alerte

Nom de la couleur	Exemple	Variables de couleurs
Critique		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é		Variables mobiles Option 1 : alerte--élevée-2 Option 2 : alerte--high-3 Option 3 (Accessible) : alerte--high-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		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é		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		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		Variables mobiles Option 1 : alerte--positif-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		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		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		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		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		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		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		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		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		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		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		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		Variable Web Option 1 :--now-color_grouped--yellow-2 Option 2 :--now-color_grouped--yellow-3 Option 3 (accessible) :--now-color_grouped--yellow-4