--- 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 --- # Considérations relatives au thème de couleur pour mobile # Considérations relatives au thème de couleur pour mobile {#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 la couleur dans vos applications mobiles pour améliorer l'expérience utilisateur. L'utilisation de couleurs adaptées à votre environnement peut aider à guider vos utilisateurs dans votre application et à identifier rapidement les informations importantes. ## Utilisation de la couleur {#color-guide-landing__section_rgn_mth_vwb} Veillez à ce que vos décisions de couleur soient cohérentes dans l'ensemble de l'application. L'association de tâches ou de workflows spécifiques à des couleurs permet aux utilisateurs de savoir quand ils ne sont pas au bon endroit. Envisagez d'utiliser des couleurs identiques ou similaires pour les applets associés. Par exemple, sélectionner le bleu pour vos applets liés aux incidents et le vert pour les applets de commande de travaux peut aider vos utilisateurs à accéder rapidement aux tâches connexes. Évitez d'utiliser trop de couleurs. Des conceptions simples de deux à trois couleurs donnent une mise en page plus propre et plus accessible. La couleur peut être utilisée pour fournir un contraste pour une meilleure lisibilité. Dans les zones où du texte s'affiche, assurez-vous que votre texte et votre arrière-plan ont un niveau de contraste élevé pour répondre aux besoins des utilisateurs malvoyants et daltoniens. La conformité aux Règles pour l'accessibilité des contenus Web (WCAG) 2.0 exige un rapport de contraste d'au moins 3:1. Il existe plusieurs outils en ligne pour vous aider à évaluer le contraste des couleurs. Des couleurs complémentaires à contraste élevé peuvent guider l'attention de votre utilisateur. Utilisez ces couleurs pour mettre en évidence les zones de vos applications qui requièrent l'attention de vos utilisateurs. ## Directives générales pour les variables de couleur {#color-guide-landing__section_z3c_xhv_xvb} Avant de commencer à utiliser des variables de couleur, gardez à l'esprit les instructions suivantes. Next Experience doit être activé : Les variables de couleur ne prennent effet que lorsque cette Next Experience option est activée. Sinon, les variables de couleur sont ignorées Les couleurs disponibles pour les variables figurent dans la table Propriétés du thème UX : Les variables de couleur utilisent les couleurs définies dans la table Propriétés du thème UX \[sys_ux_theme_property\]. Les variables de couleur sont des propriétés additives : Les propriétés de couleur existantes (utilisant des couleurs codées en dur) continuent de fonctionner si les nouvelles variables de couleur ne sont pas configurées. Cependant, les propriétés de couleur ne peuvent pas changer dynamiquement la couleur des éléments en fonction du thème. Les variables de couleur remplacent les propriétés de couleur : Les variables de couleur remplacent les propriétés de couleur non variables correspondantes si Next Experience cette option est activée et que la valeur de la variable de couleur est trouvée. : Par exemple, étant donné cette configuration d'action de règle d'interface utilisateur : {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"} et une carte des couleurs Web avec cette configuration : {"--now-color-primary-0": "#22ff00"} La couleur d'arrière-plan résolue pour cette action de règle d'interface utilisateur sera `#22ff00`. Les propriétés de couleur sont utilisées si une variable est introuvable ou n'a pas de valeur : La variable de couleur ne remplace pas si la variable est vide ou si la valeur de la variable de couleur est introuvable. Dans ce cas, la propriété de couleur (HEX) est utilisée. : Par exemple, étant donné cette configuration : {"BackgroundColorVariable": "", "BackgroundColor": "#3f2c11"} La valeur de couleur est `#3f2c11`. : Compte tenu de cette configuration : {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"} et une carte des couleurs Web avec cette configuration : {"--now-color-primary-1": "#1134a1"} La valeur de la couleur `d'arrière-plan est #3f2c11`. Les variables de couleur utilisent une convention de dénomination : La convention de dénomination des variables de couleur consiste à ajouter un suffixe de `variable` aux propriétés de couleur existantes. : Par exemple, `BackgroundColorVariable` est utilisé pour `BackgroundColor` Configurer les variables hexadécimales et de couleur : ## Prise en charge des variables de couleur par composant {#color-guide-landing__section_xrp_fj5_cxb} Utilisez ces liens pour apprendre à utiliser des variables de couleur pour modifier le thème dans vos composants mobiles. * [Prise en charge des variables de couleur pour les règles d'interface utilisateur](https://servicenow-prod.fluidtopics.net/35t~Pp0_E7bh5a1yIXrxUQ "Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos règles d’interface utilisateur mobile.") * [Prise en charge des variables de couleur pour les sections d'interface utilisateur d'icônes](https://servicenow-prod.fluidtopics.net/Or5GrmCPZbsbDqCLbvyrfQ "Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos sections d’interface utilisateur d’icônes mobiles.") * [Prise en charge des variables de couleur pour les icônes de carte](https://servicenow-prod.fluidtopics.net/CS_HKDc9zocFv06b~WyNuA "Découvrez comment utiliser des variables de couleur pour modifier le thème dans les icônes de votre carte mobile") * [Prise en charge des variables de couleur pour les icônes](https://servicenow-prod.fluidtopics.net/776iAR917CZdah5EJeevbA "Découvrez comment utiliser des variables de couleur pour modifier le thème dans les écrans de votre carte mobile") * [Prise en charge de variable de couleur pour les modèles de vue de carte](https://servicenow-prod.fluidtopics.net/Y1Dxyxa5KH4kTdvsQso6Bw "Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos vues de carte mobile.") * [Prise en charge de variable de couleur pour les boutons d'affichage de carte](https://servicenow-prod.fluidtopics.net/TK9TUabZjqGwBD2mFix9Ug "Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos boutons d’affichage de carte mobile.") * [Prise en charge des variables de couleur pour les descriptions d'entrée](https://servicenow-prod.fluidtopics.net/e84VaAVWQfr9l5ZoIASYVQ "Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos descriptions d’entrée mobiles.") {#color-guide-landing__ul_o3v_4j5_cxb}