Prise en charge des variables de couleur pour les descriptions d’entrée

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

    • Découvrez comment utiliser des variables de couleur pour modifier le thème dans vos descriptions d’entrée mobile.

    Utilisez des variables de couleur dans le champ Description de vos entrées pour contrôler la couleur du texte.

    Utilisez des variables de couleur dans le champ Description de vos entrées pour contrôler la couleur du texte lorsque le champ Description est configuré en HTML.

    Par exemple, en plus des valeurs hexadécimales de couleur telles que #FF0000, vous pouvez utiliser une variable de couleur, telle que --now-color-primary-0. Pour obtenir la liste des variables disponibles, reportez-vous à la section Considérations relatives au thème de couleur pour mobile.

    Pour plus d’informations sur les entrées, reportez-vous à la section Configurer un écran de formulaire d'entrée.

    		 Variable de couleur utilisée dans une description d’entrée

    Guide des couleurs de la description de l’entrée

    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