Prise en charge des variables de couleur pour les sections de l’interface utilisateur de type icône

Découvrez comment utiliser des variables de couleur pour changer le thème dans vos sections de l’interface utilisateur d’icône Mobile.

Les sections de l’interface utilisateur de type icône 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 figurent dans les tables suivantes : 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 obtenir des détails sur la création de ces actions, reportez-vous à Configurer une section de l'interface utilisateur de type 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 obtenir la liste des variables disponibles, consultez le guide de conception des couleurs ci-dessous.

Guide des couleurs de la section de l’interface utilisateur de l’icône mobile

Les variables de couleur sont divisées en Utilisez la directive 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 palette de couleurs groupées suivent les conventions de couleur dans 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 au sein de votre application.

Palette de couleurs d’alerte

Nom de la couleur	Couleur	Exemple	Options de couleur
Primaire			Variable mobile primaire Variable Web --now-color--primary-1
Critique			Variable mobile alerte--critique-2 Variable Web --now-color_alert--critical-2
Élevée			Variable mobile alerte--haute-2 Variable Web --now-color_alert--high-2
Warning			Variable mobile alerte--avertissement-2 Variable Web --now-color_alert--warning-2
Modérée			Variable mobile alerte--modéré-2 Variable Web --now-color_alert--moderate-2
Info			Variable mobile alerte--info-2 Variable Web --now-color_alert--info-2
Positif			Variable mobile alerte--positive-2 Variable Web --now-color_alert--positive-2
Faible			Variable mobile alerte--faible-2 Variable Web --now-color_alert--low-2

Palette de couleurs groupée

Nom de la couleur	Couleur	Exemple	Options de couleur
Bleu			Variable Web --maintenant-color_grouped--bleu-2
Marron			Variable Web --maintenant-color_grouped--brun-2
Gris			Variable Web --now-color_grouped--gray-2
Vert			Variable Web --maintenant-color_grouped--vert-2
Vert-Jaune			Variable Web --maintenant-color_grouped--vert-jaune-2
Magenta			Variable Web --now-color_grouped--magenta-2
Orange			Variable Web --now-color_grouped--orange-2
Rose			Variable Web --maintenant-color_grouped--rose-2
Violet			Variable Web --now-color_grouped--violet-2
Clair			Variable Web --maintenant-color_grouped--sarcelle-2
Jaune			Variable Web --maintenant-color_grouped--jaune-2