--- 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 sections d'interface utilisateur d'icônes # Prise en charge des variables de couleur pour les sections d'interface utilisateur d'icônes {#ariaid-title1} * Rversion finale: Yokohama * * Mis à jour 30 janv. 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes de lecture Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos sections d'interface utilisateur d'icônes mobiles. |-|-| | Les sections d'interface utilisateur des icônes ont une section Couleur avec deux champs pour contrôler les couleurs de premier plan et d'arrière-plan de l'élément. * Variable de couleur d'arrière-plan * Variable de la couleur d'avant-plan {#color-var-ui-section__ul_ovp_tkb_yvb} Ces deux champs se trouvent dans les tableaux suivants : * Lanceur de destination de la section d'icône \[sys_sg_navigation_section_destination_applet_launcher\] * Fonction de destination de la section d'icône \[sys_sg_navigation_section_destination_button\] * Écran de destination de la section d'icône \[sys_sg_navigation_section_destination_screen\] {#color-var-ui-section__ul_acr_flx_1xb} Pour en savoir plus sur la création de ces actions, 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."). 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. | | [ ] {#color-var-ui-section__table_nvp_tkb_yvb} ## Guide des couleurs de la section de l'interface utilisateur de l'icône mobile {#color-var-ui-section__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. ## Palette de couleurs d'alerte {#color-var-ui-section__section_d55_nbh_cxb} {#color-var-ui-section__table_otd_c1q_1xb__entry__4} | Nom de la couleur | Couleur | Exemple | Options de couleurs | |-|-|-|-| | Principale | ![Couleur de l’icône principale]() | ![Exemple d’icône primaire]() | Variable mobile : `primaire` Variable Web : `--now-color--primary-1 ` | | Critique | ![Couleur de l’icône critique]() | ![Exemple d’icône critique]() | Variable mobile : `alert--critical-2` Variable Web : `--now-color_alert--critical-2` | | Élevé | ![Couleur d’icône élevée]() | ![Exemple d’icône haute]() | Variable mobile : `alert--high-2` Variable Web : `--now-color_alert--high-2` | | Avertissement | ![Couleur de l’icône d’avertissement]() | ![Exemple d’icône d’avertissement]() | Variable mobile : `alert--warning-2` Variable Web : `--now-color_alert--warning-2` | | Modéré | ![Couleur modérée de l’icône]() | ![Exemple d’icône modérée]() | Variable mobile : `alert--moderate-2` Variable Web : `--now-color_alert--moderate-2` | | Info | ![Couleur de l’icône d’informations]() | ![Exemple d’icône d’informations]() | Variable mobile : `alert--info-2` Variable Web : `--now-color_alert--info-2` | | Positif | ![Couleur de l’icône positive]() | ![Exemple d’icône positive]() | Variable mobile : `alert--positive-2` Variable Web : `--now-color_alert--positive-2` | | Faible | ![Couleur basse de l’icône]() | ![Exemple d’icône basse]() | Variable mobile : `alert--low-2` Variable Web : `--now-color_alert--low-2` | [ ] {#color-var-ui-section__table_otd_c1q_1xb} ## Palette de couleurs groupée {#color-var-ui-section__section_dff_pbh_cxb} {#color-var-ui-section__table_eff_pbh_cxb__entry__4} | Nom de la couleur | Couleur | Exemple | Options de couleurs | |-|-|-|-| | Bleu | ![Couleur bleue de l’icône]() | ![Exemple d’icône bleue]() | Variable Web : `--now-color_grouped--blue-2` | | Marron | ![Couleur marron de l’icône]() | ![]() | Variable Web : `--now-color_grouped--brown-2` | | Gris | ![Couleur grise de l’icône]() | ![Exemple d’icône grise]() | Variable Web : `--now-color_grouped--gray-2` | | Vert | ![Couleur verte de l’icône]() | ![Exemple d’icône verte]() | Variable Web : `--now-color_grouped--green-2` | | vert-jaune | ![Couleur de l’icône vert-jaune]() | ![Exemple d’icône vert-jaune]() | Variable Web : `--now-color_grouped--green-yellow-2` | | Magenta | ![Couleur de l’icône magenta]() | ![Exemple d’icône magenta]() | Variable Web : `--now-color_grouped--magenta-2` | | Orange | ![Couleur orange de l’icône]() | ![Exemple d’icône orange]() | Variable Web : `--now-color_grouped--orange-2` | | Rose | ![Couleur rose de l’icône]() | ![Exemple d’icône rose]() | Variable Web : `--now-color_grouped--pink-2` | | Violet | ![Couleur violette de l’icône]() | ![Exemple d’icône violette]() | Variable Web : `--now-color_grouped--purple-2` | | Clair | ![Couleur de l’icône turquoise]() | ![Exemple d’icône turquoise]() | Variable Web : `--now-color_grouped--teal-2` | | Jaune | ![Couleur jaune de l’icône]() | ![Exemple d’icône jaune]() | Variable Web : `--now-color_grouped--yellow-2` | [ ] {#color-var-ui-section__table_eff_pbh_cxb}