Prise en charge des variables de couleur pour les règles d’interface utilisateur

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 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

    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.

    		 Variable de couleur utilisée dans une action d’interface utilisateur

    Guide des couleurs de règles d’interface utilisateur mobile

    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.
    Tableau 1. Palette de couleurs d’alerte
    Nom de la couleur Exemple Variables de couleurs
    Critique Combinaison de couleurs des alertes critiques
    Variable mobile
    alert--critical-0
    Variable Web
    --now-color_alert--critical-0
    Élevé Combinaison de couleurs d’alerte élevée
    Variable mobile
    alert--high-0
    Variable Web
    --now-color_alert--high-0
    Avertissement Combinaison de couleurs des alertes d’avertissement
    Variable mobile
    alert--warning-0
    Variable Web
    --now-color_alert--warning-0
    Modéré Combinaison de couleurs d’alerte modérée
    Variable mobile
    alert--moderate-0
    Variable Web
    --now-color_alert--moderate-0
    Info Combinaison de couleurs des alertes d’informations
    Variable mobile
    alert--info-0
    Variable Web
    --now-color_alert--info-0
    Positif Combinaison de couleurs des alertes positives
    Variable mobile
    alert--positive-0
    Variable Web
    --now-color_alert--positive-0
    Faible Combinaison de couleurs d’alerte 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 2. Palette de couleurs groupée
    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