---
sourceDocument: Configuration et navigation mobiles Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/mobile

 Release :

    - yokohama

ft:locale :

    - fr-FR

ft:publication_title :

    - Configuration et navigation mobiles Yokohama

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - evelopment, Data and Analytics


---

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

# Prise en charge des variables de couleur pour les icônes {#ariaid-title1}

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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](https://servicenow-prod.fluidtopics.net/zmvumpvqEMMbojWm6HmKTA "Utilisez le type de section de l’interface utilisateur de l’icône pour accéder aux écrans, aux écrans de lanceur et aux fonctions."). Pour en savoir plus sur la création d'icônes dans Mobile, reportez-vous à la section [Icônes Mobile](https://servicenow-prod.fluidtopics.net/F_hudYQDnc7lZ7bI7VEmdQ "Utilisez des icônes pour fournir des identificateurs uniques pour la navigation et les actions dans vos applications mobiles."). |   |
[ ]

{#color-var-mobile-icons__table_st2_mtb_yvb}

## Guide des couleurs des icônes mobiles {#color-var-mobile-icons__section_ffp_xkg_cxb}

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.
{#color-var-mobile-icons__table_otd_c1q_1xb__entry__3}

| 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` {#color-var-mobile-icons__ul_hqj_lzh_cxb} Variable Web : * Option 1 :`--now-color_alert--critical-2` * Option 2 :`--now-color_alert--critical-3` * Option 3 (Accessible) :`--now-color_alert--critical-4` {#color-var-mobile-icons__ul_wvy_lzh_cxb} |
| É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` {#color-var-mobile-icons__ul_lsh_rxm_cxb} Variable Web : * Option 1 :`--now-color_alert--high-2` * Option 2 :`--now-color_alert--high-3` * Option 3 (Accessible) :`--now-color_alert--high-4` {#color-var-mobile-icons__ul_msh_rxm_cxb} |
| Avertissement | ![Icônes mobiles d’avertissement]() | Variables mobiles : * Option 1 : `alerte--avertissement-2` * Option 2 : `alerte--avertissement-3` * Option 3 (accessible) : `alerte--avertissement-4` {#color-var-mobile-icons__ul_hxg_5xm_cxb} Variable Web : * Option 1 :`--now-color_alert--warning-2` * Option 2 :`--now-color_alert--warning-3` * Option 3 (Accessible) :`--now-color_alert--warning-4` {#color-var-mobile-icons__ul_ixg_5xm_cxb} |
| 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` {#color-var-mobile-icons__ul_upy_vxm_cxb} Variable Web : * Option 1 :`--now-color_alert--moderate-2` * Option 2 :`--now-color_alert--moderate-3` * Option 3 (accessible) :`--now-color_alert--moderate-4` {#color-var-mobile-icons__ul_vpy_vxm_cxb} |
| Info | ![Icônes mobiles d’informations]() | Variables mobiles : * Option 1 : `alerte--info-2` * Option 2 : `alerte--info-3` * Option 3 (Accessible) : `alerte--info-4` {#color-var-mobile-icons__ul_bhs_xxm_cxb} Variable Web : * Option : 1`--now-color_alert--info-2` * Option 2 :`--now-color_alert--info-3` * Option 3 (Accessible) :`--now-color_alert--info-4` {#color-var-mobile-icons__ul_chs_xxm_cxb} |
| Positif | ![Icônes mobiles positives]() | Variables mobiles : * Option 1 : `alerte--positive-2` * Option 2 : `alerte--positive-3` * Option 3 (Accessible) : `alerte--positive-4` {#color-var-mobile-icons__ul_hy3_1ym_cxb} Variable Web : * Option 1 :`--now-color_alert--positive-2` * Option 2 :`--now-color_alert--positive-3` * Option 3 (Accessible) :`--now-color_alert--positive-4` {#color-var-mobile-icons__ul_iy3_1ym_cxb} |
| Faible | ![Icônes Mobile basse]() | Variables mobiles : * Option 1 : `alerte--faible-2` * Option 2 : `alerte--faible-3` * Option 3 (Accessible) : `alerte--faible-4` {#color-var-mobile-icons__ul_avy_bym_cxb} Variable Web : * Option 1 :`--now-color_alert--low-2` * Option 2 :`--now-color_alert--low-3` * Option 3 (Accessible) :`--now-color_alert--low-4` {#color-var-mobile-icons__ul_bvy_bym_cxb} |
[Tableau 1. Palette de couleurs d'alerte]

{#color-var-mobile-icons__table_otd_c1q_1xb} {#color-var-mobile-icons__table_f5d_c1q_1xb__entry__3}

| 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` {#color-var-mobile-icons__ul_lqy_gym_cxb} |
| 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` {#color-var-mobile-icons__ul_kcy_kym_cxb} |
| 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` {#color-var-mobile-icons__ul_ols_lym_cxb} |
| 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` {#color-var-mobile-icons__ul_fy1_nym_cxb} |
| 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` {#color-var-mobile-icons__ul_l5v_nym_cxb} |
| 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` {#color-var-mobile-icons__ul_vlk_pym_cxb} |
| 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` {#color-var-mobile-icons__ul_xyn_qym_cxb} |
| 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` {#color-var-mobile-icons__ul_xsm_rym_cxb} |
| 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` {#color-var-mobile-icons__ul_dbl_sym_cxb} |
| 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` {#color-var-mobile-icons__ul_egx_tym_cxb} |
| 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` {#color-var-mobile-icons__ul_w3p_vym_cxb} |
[Tableau 2. Palette de couleurs groupée]

{#color-var-mobile-icons__table_f5d_c1q_1xb}