Choix des thèmes dans les modèles d’exemples d’applications

2025-05-22

La caractéristique la plus attrayante des applications canevas est la possibilité de personnaliser l’interface utilisateur en fonction de la marque et des préférences de l’utilisateur ou de l’organisation. La stratégie de thématisation nous offre la possibilité de créer des applications qui correspondent à la marque de l’organisation. Un thème contient une collection de styles qui définissent plusieurs propriétés de conception des contrôles et des composants, telles que les couleurs, les polices et les bordures.

Dans cet article, nous allons apprendre à utiliser des variables globales pour définir des thèmes, et comment les couleurs et les propriétés peuvent être facilement modifiées dans l’application en mettant simplement à jour les variables globales.

Regardez cette vidéo pour en savoir plus sur la création de thèmes dans les modèles d’exemples d’applications :

Conditions préalables

Pour suivre cette leçon, vous aurez besoin de pouvoir créer des applications dans Microsoft Teams qui seront disponibles dans le cadre de certains abonnements Microsoft 365. Vous aurez également besoin du modèle d’exemple d’application Jalons pour que Microsoft Teams soit installé pour votre équipe. Vous pouvez l’installer dans votre équipe à https://aka.ms/TeamsMilestones.

Définir la stratégie de thématisation

Dans cet exemple, nous verrons comment les variables globales ont été utilisées pour définir les couleurs et les styles pour le thème dans l’application Milestones. Les variables globales suivantes ont été définies dans la propriété OnVisible de l’écran de chargement.

gblAppColors pour définir les couleurs afin qu’elles puissent être référencées facilement
gblAppSizes pour définir différentes tailles de polices pour les applications mobiles et web
Propriétés gblAppStyles de chaque contrôle en utilisant gblAppColors
gblThemeDark défini sur true lorsque le thème Teams est sombre afin que tous les contrôles s’adaptent au thème sombre
gblThemeHiCo défini sur true lorsque le thème des équipes est à contraste élevé afin que toutes les commandes s’adaptent au contraste élevé

Test de la stratégie de thématisation

Deux écrans cachés ont été définis pour tester la stratégie de thématisation :

Écran d’administration caché : cet écran a deux bascules définies tglAdmin_DarkMode et tglAdmin_ContrastMode. Cet écran permet de tester rapidement les modes sombre et contrasté sans avoir à changer le thème des équipes pour les tests
Écran des contrôles cachés - Cet écran contient chaque contrôle avec des propriétés définies à l’aide de gblAppStyles.
- Aide à tester les changements de thème.
- Aide à copier un contrôle particulier et à le coller sur l’écran requis afin que la formule du contrôle n’ait pas besoin d’être tapée à plusieurs reprises.

Utilisation des variables de thème pour des modèles d’exemple d’application

Pour comprendre l’utilisation des thèmes dans l’application Jalons, sélectionnez Écran des projets dans l’arborescence pour ouvrir l’écran, puis sélectionnez +Nouveau projet.
Sélectionnez la propriété Color de +Nouveau projet.

Notez que la formule fait référence à la formule gblAppStyles>BoutonTransparent>Color de la propriété OnVisible de l’écran de chargement.

Alors maintenant, si le thème de l’application est Contraste élevé, alors la couleur définie dans la formule gblAppColors>HighContrastHyperlinks sera utilisée.
Un autre exemple serait de regarder les boutons Primaire et Secondaire.
- Sélectionnez l’écran du projet dans l’éditeur.
- Maintenez la touche Alt enfoncée et sélectionnez l’icône Filtre sur l’écran Projets.
  
  La fenêtre contextuelle Filtrer les éléments de travail s’ouvre. Remarquez les deux boutons : Effacer et Appliquer.
  
  Appliquer est un exemple de bouton principal et Effacer est un exemple de bouton secondaire.
Sélectionnez le bouton Appliquer et sélectionnez n’importe quelle propriété liée à la bordure/épaisseur/couleur et notez la formule définie.
Le bouton Appliquer est défini comme le bouton principal et utilise toutes les propriétés définies sur la formule Écran de chargement>OnVisible>BoutonPrimary.

Selon le thème et les variables de couleur sélectionnés dans la formule BoutonPrimary, les propriétés de style du bouton seront mises à jour.

De la même manière, Effacer est défini comme un bouton secondaire et utilise toutes les propriétés définies sous gblAppStyles>BoutonSecondary.

Nonte

Une autre extension possible de l’application serait d’ajouter Font en tant que propriété, soit en tant que variable à utiliser dans tous les contrôles, soit une fois par contrôle (comme la façon dont les autres propriétés de style sont définies séparément pour les boutons principaux ou les boutons secondaires). La police dans l’application Milestones est Segoe UI et il n’y avait aucun besoin identifié pour la thématisation de la police.

Mise à jour du thème dans le modèle d’exemple d’application

Dans cette section, nous verrons comment modifier une propriété d’un contrôle particulier et comment le contrôle est mis à jour sur différents écrans. Dans notre exemple, nous mettrons à jour la propriété Fill du bouton principal et verrons comment la couleur du bouton change en mode sombre et en mode par défaut.

Accédez à Écran de chargement et sélectionnez la propriété OnVisible dans la liste déroulante.
Développez la barre de formule et faites défiler jusqu’à la fonction BoutonPrimary>Fill.
Mettez à jour les deux derniers paramètres sur Red et DarkRed.
Accédez à un autre écran, puis revenez à l’écran de chargement pour la fonction OnVisible à exécuter.
Accédez à l’écran Projets, sélectionnez le bouton Filtre pour ouvrir la fenêtre contextuelle Filtre et remarquez que la couleur du bouton Appliquer est maintenant DarkRed.
Accédez à l’Écran d’administration caché, maintenez la touche Alt enfoncée et sélectionnez la bascule Mode sombre activé.
Accédez à nouveau à l’écran de chargement pour la fonction à charger, puis revenez à l’écran Projets. Notez que l’écran est maintenant en mode sombre (avec l’arrière-plan sombre) et la couleur du bouton Appliquer est maintenant passée à Rouge.
De même, la modification des propriétés du SecondaryBouton aurait changé de couleur pour le bouton secondaire, comme le bouton Effacer.

Nonte

La mise à jour directe de la fonction de remplissage est un moyen rapide de tester le thème, comme indiqué précédemment. Si la couleur doit être modifiée non seulement pour le contrôle Primary Bouton, mais pour tous les autres contrôles où il est également utilisé, la palette de couleurs sous la variable gblAppColors doit être mise à jour avec la formule des couleurs et des noms souhaités qui rendent le plus sensé pour votre organisation. Par exemple, companynameDefaultHeader: ColorValue("#30D5C8") serait la formule du bleu turquoise.