Prise en charge des variables de couleur pour les sections d’interface utilisateur d’icônes

  • 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 sections d’interface utilisateur d’icônes mobiles.

    Les sections d’interface utilisateur des icônes ont une section Couleur avec deux champs pour contrôler les couleurs de premier plan et d’arrière-plan de l’élément.

    • Variable de couleur d’arrière-plan
    • Variable de la couleur d'avant-plan
    Ces deux champs se trouvent dans les tableaux suivants :
    • Lanceur de destination de la section d’icône [sys_sg_navigation_section_destination_applet_launcher]
    • Fonction de destination de la section d’icône [sys_sg_navigation_section_destination_button]
    • Écran de destination de la section d’icône [sys_sg_navigation_section_destination_screen]

    Pour en savoir plus sur la création de ces actions, reportez-vous à la section Configurer une section de l’interface utilisateur d’icône.

    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.

    		 Variable de couleur utilisée dans une section de l’interface utilisateur d’une icône

    Guide des couleurs de la section de l’interface utilisateur de l’icône 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.

    Palette de couleurs d’alerte

    Nom de la couleur Couleur Exemple Options de couleurs
    Principale Couleur de l’icône principale Exemple d’icône primaire
    Variable mobile
    primaire
    Variable Web
    --now-color--primary-1
    Critique Couleur de l’icône critique Exemple d’icône critique
    Variable mobile
    alert--critical-2
    Variable Web
    --now-color_alert--critical-2
    Élevé Couleur d’icône élevée Exemple d’icône haute
    Variable mobile
    alert--high-2
    Variable Web
    --now-color_alert--high-2
    Avertissement Couleur de l’icône d’avertissement Exemple d’icône d’avertissement
    Variable mobile
    alert--warning-2
    Variable Web
    --now-color_alert--warning-2
    Modéré Couleur modérée de l’icône Exemple d’icône modérée
    Variable mobile
    alert--moderate-2
    Variable Web
    --now-color_alert--moderate-2
    Info Couleur de l’icône d’informations Exemple d’icône d’informations
    Variable mobile
    alert--info-2
    Variable Web
    --now-color_alert--info-2
    Positif Couleur de l’icône positive Exemple d’icône positive
    Variable mobile
    alert--positive-2
    Variable Web
    --now-color_alert--positive-2
    Faible Couleur basse de l’icône Exemple d’icône basse
    Variable mobile
    alert--low-2
    Variable Web
    --now-color_alert--low-2

    Palette de couleurs groupée

    Nom de la couleur Couleur Exemple Options de couleurs
    Bleu Couleur bleue de l’icône Exemple d’icône bleue
    Variable Web
    --now-color_grouped--blue-2
    Marron Couleur marron de l’icône
    Variable Web
    --now-color_grouped--brown-2
    Gris Couleur grise de l’icône Exemple d’icône grise
    Variable Web
    --now-color_grouped--gray-2
    Vert Couleur verte de l’icône Exemple d’icône verte
    Variable Web
    --now-color_grouped--green-2
    vert-jaune Couleur de l’icône vert-jaune Exemple d’icône vert-jaune
    Variable Web
    --now-color_grouped--green-yellow-2
    Magenta Couleur de l’icône magenta Exemple d’icône magenta
    Variable Web
    --now-color_grouped--magenta-2
    Orange Couleur orange de l’icône Exemple d’icône orange
    Variable Web
    --now-color_grouped--orange-2
    Rose Couleur rose de l’icône Exemple d’icône rose
    Variable Web
    --now-color_grouped--pink-2
    Violet Couleur violette de l’icône Exemple d’icône violette
    Variable Web
    --now-color_grouped--purple-2
    Clair Couleur de l’icône turquoise Exemple d’icône turquoise
    Variable Web
    --now-color_grouped--teal-2
    Jaune Couleur jaune de l’icône Exemple d’icône jaune
    Variable Web
    --now-color_grouped--yellow-2