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

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 2 minutes de lecture

    • Découvrez comment utiliser des variables de couleur pour changer de 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

    • Variable de couleur d’arrière-plan
    • 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 section Créer une action de règle d'interface utilisateur pour mobile.

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

    Guide des couleurs des 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, les états et les 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é à une industrie 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 d’alerte d’avertissement
    Variable mobile
    alert--warning-0
    Variable Web
    --now-color_alert--warning-0
    Modéré Modèle modéré de couleurs d’alerte
    Variable mobile
    alert--moderate-0
    Variable Web
    --now-color_alert--moderate-0
    Info Combinaison de couleurs d’alerte d’informations
    Variable mobile
    alert--info-0
    Variable Web
    --now-color_alert--info-0
    Positif Combinaison de couleurs d’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)
    Variable mobile
    alert--critical-4
    Variable Web
    --now-color_alert--critical-4
    Élevé (alternatif) Combinaison alternative de couleurs d’alerte élevée
    Variable mobile
    alert--high-4
    Variable Web
    --now-color_alert--high-4
    Avertissement (alternatif) Autre combinaison de couleurs d’alerte d’avertissement
    Variable mobile
    alert--warning-4
    Variable Web
    --now-color_alert--warning-4
    Modéré (alternatif) Modérer l’alternance de combinaison de couleurs d’alerte
    Variable mobile
    alert--moderate-4
    Variable Web
    --now-color_alert--moderate-4
    Informations (alternatives) Combinaison alternative de couleurs d’alerte d’informations
    Variable mobile
    alert--info-4
    Variable Web
    --now-color_alert--info-4
    Positif (alternatif) Combinaison alternative de couleurs d’alertes positives
    Variable mobile
    alert--positive-4
    Variable Web
    --now-color_alert--positive-4
    Faible (alternatif) Combinaison de couleurs d’alerte faible alternative
    Variable mobile
    alert--low-4
    Variable Web
    --now-color_alert--low-4
    Désactivé (alternatif) Autre combinaison de couleurs d’alerte désactivée
    Variable mobile
    alerte-désactivée-texte
    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 groupées vertes
    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 groupées orange
    Variable Web
    --now-color_grouped--orange-0
    Rose Combinaison de couleurs groupées rose
    Variable Web
    --now-color_grouped--pink-0
    Violet Combinaison de couleurs groupées violettes
    Variable Web
    --now-color_grouped--purple-0
    Clair Combinaison de couleurs groupées bleu-vert
    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 groupées bleues alternative
    Variable Web
    --now-color_grouped--blue-4
    Marron (alternatif) Combinaison de couleurs groupées marron alternative
    Variable Web
    --now-color_grouped--brown-4
    Gris (alternatif) Combinaison de couleurs grises groupées alternative
    Variable Web
    --now-color_grouped--gray-4
    Vert (alternatif) Combinaison de couleurs groupées vert alternative
    Variable Web
    --now-color_grouped--green-4
    Vert-jaune (alternatif) Combinaison de couleurs groupées vert-jaune alternative
    Variable Web
    --now-color_grouped--vert-jaune-4
    Magenta (alternatif) Combinaison de couleurs groupées magenta alternative
    Variable Web
    --now-color_grouped--magenta-4
    Orange (alternatif) Combinaison de couleurs groupées orange alternative
    Variable Web
    --now-color_grouped--orange-4
    Rose (alternatif) Combinaison de couleurs groupées rose alternative
    Variable Web
    --now-color_grouped--pink-4
    Violet (alternatif) Combinaison de couleurs groupée violet alternative
    Variable Web
    --now-color_grouped--purple-4
    Bleu-vert (alternatif) Combinaison de couleurs groupées sarcelle autre
    Variable Web
    --now-color_grouped--teal-4
    Jaune (alternatif) Combinaison de couleurs groupée jaune alternative
    Variable Web
    --now-color_grouped--yellow-4