Choisir le thème d'application

Un thème est une combinaison de couleurs prédéfinie pour l’apparence de votre application. Modifier le thème permet de modifier la manière dont votre application apparaît aux utilisateurs finaux lorsque ces derniers accèdent à votre site sur le Web. Le thème n’affecte pas la mise en page et le contenu. Experience Builder offre au concepteur des thèmes avec des options permettant de les personnaliser.

Couleurs du thème

Le paramètre de thème détermine les couleurs utilisées dans votre application. Différents thèmes possèdent des jeux de couleurs différents. Il existe huit variables de couleur dans un jeu : Primary (Primaire), Secondary (Secondaire), Light (Clair), Dark (Foncé), Info (Info), Success (Réussite), Warning (Avertissement) et Danger (Danger). Chaque variable de couleur possède neuf échelles de gris composées des couleurs thématiques à appliquer par votre application aux pages et widgets. Par exemple, lorsque vous configurez les widgets, les options de couleur par défaut correspondent à votre thème d'application et au thème partagé de votre organisation (si applicable). En outre, vous pouvez personnaliser les couleurs des widgets en choisissant des couleurs dans un jeu recommandé de couleurs Standard (Standard), parmi les couleurs Recent (Récentes) ou parmi des More colors (Couleurs supplémentaires) pour créer vos propres couleurs. Vous pouvez également effacer la couleur sélectionnée pour utiliser une couleur par défaut du système qui dépend des couleurs environnantes.

Les huit variables de couleur constituent la palette de couleurs du thème. Les neuf échelles de gris sont générées automatiquement par Experience Builder.

Utiliser des couleurs thématiques

Lorsque vous utilisez une couleur thématique pour styliser les éléments de votre application, l’élément fait référence à une variable de couleur thématique. Lorsque vous modifiez le thème de l’application, la valeur d’une variable de couleur thématique change et la couleur de l’élément change en conséquence. Par exemple, l’arrière-plan d’un bouton peut utiliser la couleur primaire 400, qui correspond à un bleu médian dans le thème par défaut. Si le thème est remplacé par le thème éclatant (dans lequel la couleur primaire 400 correspond à un orange médian), l’arrière-plan du bouton passe à l’orange médian.

Par défaut, les variables de couleur sont mappées pour pouvoir être utilisées dans les éléments d’application suivants :

• Les couleurs primaires sont utilisées pour l’état actif des éléments interactifs de l’interface utilisateur, tels que les boutons et les menus.
• Les couleurs secondaires ne sont pas utilisées par défaut. Cette variable de couleur est fournie pour une plus grande variété. Par exemple, vous pouvez la personnaliser en fonction de votre marque. Lorsque vous créez votre application, configurez un élément (tel que l’état actif d’un widget) pour qu’il utilise la couleur personnalisée.
• Les couleurs claires sont principalement utilisées pour la couleur d'arrière-plan des conteneurs et de leur contour.
• Les couleurs foncées sont principalement utilisées pour le texte.
• Les autres couleurs de la palette ne sont pas utilisées par défaut dans les éléments de l’interface utilisateur de l’application, mais elles le sont dans les messages d’alerte générés par le système, par exemple, quand des widgets fonctionnels sont exécutés correctement ou non. Vous pouvez également utiliser ces couleurs d’alerte pour l’interface utilisateur. Par exemple, vous pouvez ajouter un bouton avec une action urgente en utilisant une couleur de danger ou choisir une couleur jaune d’avertissement pour l’en-tête de l’application. Gardez toutefois à l’esprit que si vous modifiez ces couleurs dans les paramètres de thème, les éléments associés et les couleurs des messages système changent en conséquence.
  • Couleurs Info (Info) : utilisées dans les messages d'information.
  • Couleurs Success (Réussite) : utilisées pour les messages d'état de réussite, par exemple, lorsque le processus du widget aboutit et qu’il génère un message.
  • Couleurs Warning (Avertissement) : utilisées pour les messages d'avertissement.
  • Couleurs Danger (Danger) : utilisées pour les messages d’erreur ou de danger, par exemple, lorsque le processus d’un widget échoue.

Paramètres

Dans le panneau Theme (Thème), vous pouvez sélectionner l’un des thèmes prédéfinis suivants à appliquer à votre application :

• Default (Par défaut) : principalement bleu et blanc.
• Dark (Foncé) : arrière-plan foncé avec mises en surbrillance.
• Vivid (Éclatant) : tons vifs.
• Organization Shared (Partagé par l'organisation) : synchronisation avec le paramètre de thème partagé de votre organisation. Vous ne pouvez pas personnaliser de couleurs si vous choisissez ce paramètre. Si vous ne choisissez pas ce thème, vous pouvez tout de même sélectionner des couleurs du thème partagé lorsque vous configurez les paramètres de couleurs d’un widget.

Cliquez sur Customize (Personnaliser) pour modifier une palette de couleurs. Lorsque vous personnalisez une palette de couleurs, vous pouvez sélectionner une palette parmi l’ensemble des palettes de couleurs recommandées ou personnaliser la couleur de l’une des variables de couleurs thématiques.