--- 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 règles d'interface utilisateur # Prise en charge des variables de couleur pour les règles d'interface utilisateur {#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 règles d'interface utilisateur mobile. |-|-| | Utilisez les variables de couleur suivantes dans le champ Valeur de vos règles d'interface utilisateur avec le champ Opération défini sur Définir le style d'interface utilisateur * `VariableDeCouleurDeFond` * `FontColorVariable` à l'extérieur ou à l'intérieur du `TextDecorator` {#color-var-ui-rule__ul_nnz_533_ywb} 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. Par exemple : `{"BackgroundColorVariable >> : << --now-color-secondary-3 >>, << BackgroundColor >> : << #3f2c11"}` Pour en savoir plus sur la création de ces actions de règle d'interface utilisateur, reportez-vous à la rubrique [Créer une action de règle d'interface utilisateur mobile](https://servicenow-prod.fluidtopics.net/2L8BVZXp1VH20TywuY9UXw "Créez les actions qui s’exécutent lorsque les conditions de règles de votre interface utilisateur mobile sont remplies."). | | [ ] {#color-var-ui-rule__table_fbp_nfb_yvb} ## Guide des couleurs de règles d'interface utilisateur mobile {#color-var-ui-rule__section_vvh_wzp_1xb} 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. {#color-var-ui-rule__table_otd_c1q_1xb__entry__3} | Nom de la couleur | Exemple | Variables de couleurs | |-|-|-| | Critique | | Variable mobile : `alert--critical-0` Variable Web : `--now-color_alert--critical-0` | | Élevé | | Variable mobile : `alert--high-0` Variable Web : `--now-color_alert--high-0` | | Avertissement | | Variable mobile : `alert--warning-0` Variable Web : `--now-color_alert--warning-0` | | Modéré | | Variable mobile : `alert--moderate-0` Variable Web : `--now-color_alert--moderate-0` | | Info | | Variable mobile : `alert--info-0` Variable Web : `--now-color_alert--info-0` | | Positif | | Variable mobile : `alert--positive-0` Variable Web : `--now-color_alert--positive-0` | | Faible | | Variable mobile : `alert--low-0` Variable Web : `--now-color_alert--low-0` | | Désactivé | ![Combinaison de couleurs d’alerte désactivée]() | Variable mobile : `alerte-désactivée-arrière-plan` Variable Web : `--now-color_background--secondary` | | Critique (alternatif) | ![Combinaison de couleurs des alertes critiques Autre combinaison]() | Variable mobile : `alert--critical-4` Variable Web : `--now-color_alert--critical-4` | | Élevé (alternatif) | ![Combinaison de couleurs d’alerte élevée alternative]() | Variable mobile : `alert--high-4` Variable Web : `--now-color_alert--high-4` | | Avertissement (alternatif) | ![Autre combinaison de couleurs des alertes d’avertissement]() | Variable mobile : `alert--warning-4` Variable Web : `--now-color_alert--warning-4` | | Modéré (alternatif) | ![Combinaison de couleurs d’alerte modérée Autre combinaison]() | Variable mobile : `alert--moderate-4` Variable Web : `--now-color_alert--moderate-4` | | Informations (alternatives) | ![Autre combinaison de couleurs des alertes d’informations]() | Variable mobile : `alert--info-4` Variable Web : `--now-color_alert--info-4` | | Positif (alternatif) | ![Combinaison de couleurs des alertes positives Autre combinaison]() | Variable mobile : `alert--positive-4` Variable Web : `--now-color_alert--positive-4` | | Faible (alternatif) | ![Combinaison de couleurs d’alerte faible autre]() | Variable mobile : `alert--low-4` Variable Web : `--now-color_alert--low-4` | | Désactivé (alternatif) | ![Autre combinaison de couleurs des alertes désactivée]() | Variable mobile : `texte alerte-désactivée` Variable Web : `--now-color_text--tertiaire` | [Tableau 1. Palette de couleurs d'alerte] {#color-var-ui-rule__table_otd_c1q_1xb} {#color-var-ui-rule__table_f5d_c1q_1xb__entry__3} | Nom de la couleur | Exemple | Options de couleurs | |-|-|-| | Bleu | ![Combinaison de couleurs bleues groupées]() | Variable Web : `--now-color_grouped--blue-0` | | Marron | ![Combinaison de couleurs groupées marron]() | Variable Web : `--now-color_grouped--brown-0` | | Gris | ![Combinaison de couleurs grises groupées]() | Variable Web : `--now-color_grouped--gray-0` | | Vert | ![Combinaison de couleurs vertes groupées]() | Variable Web : `--now-color_grouped--green-0` | | vert-jaune | ![Combinaison de couleurs groupées vert-jaune]() | Variable Web : `--now-color_grouped--green-yellow-0` | | Magenta | ![Combinaison de couleurs groupées magenta]() | Variable Web : `--now-color_grouped--magenta-0` | | Orange | ![Combinaison de couleurs orange groupées]() | Variable Web : `--now-color_grouped--orange-0` | | Rose | ![Combinaison de couleurs roses groupées]() | Variable Web : `--now-color_grouped--pink-0` | | Violet | ![Combinaison de couleurs regroupées violettes]() | Variable Web : `--now-color_grouped--purple-0` | | Clair | ![Combinaison de couleurs groupées bleu sarcelle]() | Variable Web : `--now-color_grouped--teal-0` | | Jaune | ![Combinaison de couleurs jaunes groupées]() | Variable Web : `--now-color_grouped--yellow-0` | | Bleu (alternatif) | ![Combinaison de couleurs regroupées bleues alternativement]() | Variable Web : `--now-color_grouped--blue-4` | | Marron (alternatif) | ![Combinaison de couleurs groupées marron alternativement]() | Variable Web : `--now-color_grouped--brown-4` | | Gris (alternatif) | ![Combinaison de couleurs grises groupées alternativement]() | Variable Web : `--now-color_grouped--gray-4` | | Vert (alternatif) | ![Combinaison de couleurs regroupées vertes alternativement]() | Variable Web : `--now-color_grouped--green-4` | | Vert-jaune (alternatif) | ![Combinaison de couleurs groupées vert-jaune alternée]() | Variable Web : `--now-color_grouped--green-yellow-4` | | Magenta (alternatif) | ![Combinaison de couleurs groupées magenta de remplacement]() | Variable Web : `--now-color_grouped--magenta-4` | | Orange (alternatif) | ![Combinaison de couleurs orange groupées Autre combinaison]() | Variable Web : `--now-color_grouped--orange-4` | | Rose (alternatif) | ![Combinaison de couleurs rose groupées alternativement]() | Variable Web : `--now-color_grouped--pink-4` | | Violet (alternatif) | ![Combinaison de couleurs regroupées violettes alternativement]() | Variable Web : `--now-color_grouped--purple-4` | | Bleu-vert (alternatif) | ![Combinaison de couleurs groupées bleu sarcelle Autre combinaison]() | Variable Web : `--now-color_grouped--teal-4` | | Jaune (alternatif) | ![Combinaison de couleurs jaunes groupées autre]() | Variable Web : `--now-color_grouped--yellow-4` | [Tableau 2. Palette de couleurs groupée] {#color-var-ui-rule__table_f5d_c1q_1xb}