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

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 3 minutes de lecture

    • 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.

    		 Variable de couleur utilisée dans une icône

    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 Icônes Mobile critiques
    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 Icônes Mobile hautes
    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 Icônes Mobile d’avertissement
    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 Modérer les icônes Mobile
    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 Icônes d’informations mobiles
    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 Icônes Mobile positives
    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 Icônes mobiles basses
    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 Icônes mobiles bleues
    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 Icônes mobiles 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 Icônes mobiles grises
    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 Icônes mobiles vertes
    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 Icônes mobiles 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 Icônes mobiles 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 Icônes Mobile 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 Icônes mobiles roses
    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 Icônes Mobile violettes
    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 Icônes Mobile turquoise
    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 Icônes Mobile jaunes
    Variable Web
    • Option 1 :--maintenant-color_grouped--jaune-2
    • Option 2 : --maintenant-color_grouped--jaune-3
    • Option 3 (accessible) :--now-color_grouped--yellow-4