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

Découvrez comment utiliser des variables de couleur pour changer le thème de vos écrans de carte Mobile

Les icônes Mobile disposent d’une section Définir l’apparence utilisée pour définir l’apparence de vos icônes. Utilisez l’option de style FontColorVariable pour utiliser une variable de couleur pour 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 obtenir la liste des variables disponibles, consultez le guide de conception des couleurs ci-dessous. Pour en savoir plus sur la création d’écrans de carte, reportez-vous à Configurer une section de l'interface utilisateur de type icône. Pour en savoir plus sur la création d’icônes sur Mobile, reportez-vous à Icônes Mobile.

Guide des couleurs d’icône Mobile

Les variables de couleur sont divisées en Utilisez la directive 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 palette de couleurs groupées suivent les conventions de couleur dans 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 au sein de votre application.

Chaque couleur de support dispose de 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 couleur
Critique		Variables Mobile Option 1 : alerte--critical-2 Option 2 : alerte--critique-3 Option 3 (accessible) : alerte--critique-4 Variable Web Option 1 :--now-color_alert--critical-2 Option 2 :--maintenant-color_alert--critique-3 Option 3 (accessible) :--now-color_alert--critical-4
Élevée		Variables Mobile Option 1 : alerte--high-2 Option 2 : alerte--high-3 Option 3 (accessible) : alerte--high-4 Variable Web Option 1 : --maintenant-color_alert--haute-2 Option 2 : --maintenant-color_alert--haute-3 Option 3 (accessible) :--now-color_alert--high-4
Warning		Variables Mobile Option 1 : alerte--avertissement-2 Option 2 : alerte--avertissement-3 Option 3 (accessible) : alert--warning-4 Variable Web Option 1 :--maintenant-color_alert--avertissement-2 Option 2 :--maintenant-color_alert--avertissement-3 Option 3 (accessible) :--now-color_alert--warning-4
Modérée		Variables Mobile Option 1 : alerte--moderate-2 Option 2 : alerte--moderate-3 Option 3 (accessible) : alerte--moderate-4 Variable Web Option 1 :--maintenant-color_alert--modéré-2 Option 2 :--maintenant-color_alert--modéré-3 Option 3 (accessible) :--now-color_alert--moderate-4
Info		Variables Mobile 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 :--maintenant-color_alert--info-3 Option 3 (accessible) :--now-color_alert--info-4
Positif		Variables Mobile Option 1 : alerte--positive-2 Option 2 : alerte--positive-3 Option 3 (accessible) : alerte--positive-4 Variable Web Option 1 :--maintenant-color_alert--positif-2 Option 2 :--maintenant-color_alert--positif-3 Option 3 (accessible) :--now-color_alert--positive-4
Faible		Variables Mobile Option 1 : alerte--low-2 Option 2 : alerte--low-3 Option 3 (accessible) : alerte--low-4 Variable Web Option 1 :--maintenant-color_alert--bas-2 Option 2 :--maintenant-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 couleur
Bleu		Variable Web Option 1 :--maintenant-color_grouped--bleu-2 Option 2 :--maintenant-color_grouped--bleu-3 Option 3 (accessible) :--now-color_grouped--blue-4
Marron		Variable Web Option 1 :--maintenant-color_grouped--brun-2 Option 2 : --maintenant-color_grouped--brun-3 Option 3 (accessible) :--now-color_grouped--brown-4
Gris		Variable Web Option 1 :--now-color_grouped--gray-2 Option 2 :--maintenant-color_grouped--gris-3 Option 3 (accessible) :--now-color_grouped--gray-4
Vert		Variable Web Option 1 :--maintenant-color_grouped--vert-2 Option 2 : --maintenant-color_grouped--vert-3 Option 3 (accessible) :--now-color_grouped--green-4
Vert-Jaune		Variable Web Option 1 : --maintenant-color_grouped--vert-yelow-2 Option 2 : --maintenant-color_grouped--vert-yelow-3 Option 3 (accessible) :--now-color_grouped--green-yelow-4
Magenta		Variable Web Option 1 :--maintenant-color_grouped--magenta-2 Option 2 :--maintenant-color_grouped--magenta-3 Option 3 (accessible) :--now-color_grouped--magenta-4
Orange		Variable Web Option 1 :--maintenant-color_grouped--orange-2 Option 2 »--maintenant-color_grouped--orange-3 Option 3 (accessible) :--now-color_grouped--orange-4
Rose		Variable Web Option 1 : --maintenant-color_grouped--rose-2 Option 2 : --maintenant-color_grouped--rose-3 Option 3 (accessible) :--now-color_grouped--pink-4
Violet		Variable Web Option 1 :--maintenant-color_grouped--violet-2 Option 2 :--maintenant-color_grouped--violet-3 Option 3 (accessible) :--now-color_grouped--purple-4
Clair		Variable Web Option 1 :--maintenant-color_grouped--sarcelle-2 Option 2 :--maintenant-color_grouped--sarcelle-3 Option 3 (accessible) :--now-color_grouped--teal-4
Jaune		Variable Web Option 1 :--maintenant-color_grouped--jaune-2 Option 2 : --maintenant-color_grouped--jaune-3 Option 3 (accessible) :--now-color_grouped--yellow-4