Vue d’ensemble des thèmes

Dans les portails Power Apps, la fonctionnalité Activer le thème de base est définie sur Désactivé. Lorsque vous activez cette fonctionnalité, vous pouvez utiliser des thèmes par défaut appelés Prédéfinis. Vous pouvez également créer des copies des thèmes prédéfinis pour une personnalisation supplémentaire.

Dans cet article, vous allez parcourir la fonctionnalité des thèmes de base. Pour une personnalisation avancée des thèmes, voir Modifier CSS.

Activer les thèmes de base pour les portails existants

1. Connectez-vous à Power Apps.

2. Sélectionnez Applications dans le volet gauche, puis le portail.

   

3. Sélectionnez Plus de commandes (...), puis Modifier.

   

4. Sélectionnez Thèmes dans le volet de navigation de gauche, puis activez le bouton de basculement Activer le thème de base.

   

Modifier le thème de votre portail

Vous pouvez définir n’importe quel thème existant dans votre portail sur un thème par défaut.

1. Connectez-vous à Power Apps.

2. Sélectionnez Applications dans le volet gauche, puis le portail.

3. Sélectionnez Plus de commandes (...), puis Modifier.

4. Sélectionnez Thème dans le volet des composants.

   

5. Sélectionnez un thème par défaut parmi les préréglages disponibles (dans notre exemple, nous avons sélectionné Vert).

   

Le thème sélectionné est appliqué à votre portail.

Créer un thème

1. Connectez-vous à Power Apps.

2. Sélectionnez Applications dans le volet gauche, puis le portail.

3. Sélectionnez Plus de commandes (...), puis Modifier.

4. Sélectionnez Thème dans le volet des composants.

5. Sélectionnez Nouveau thème.

   

Modifier les détails du thème

Vous pouvez mettre à jour le nom du thème, sa description, sa couleur et d’autres paramètres de typographie dans Power Apps Studio.

1. Connectez-vous à Power Apps.

2. Sélectionnez Applications dans le volet gauche, puis le portail.

3. Sélectionnez Plus de commandes (...), puis Modifier.

4. Sélectionnez Thème dans le volet des composants.

5. Sélectionnez le thème actuellement appliqué ou sélectionnez un nouveau thème dans les préréglages. La sélection d’un thème ouvre le volet des détails sur le côté droit de votre espace de travail.

   

6. Modifiez les détails du thème tels que le nom, la description et la couleur pour différentes zones.

   Option de couleur	Zone affectée
   Principale	Couleurs du bouton et du lien.
   En-tête	Couleur d’arrière-plan de l’en-tête.
   Texte du menu d’en-tête	Couleur du texte du menu d’en-tête.
   Pointage du menu d’en-tête	Couleur d’arrière-plan des éléments de menu lorsqu’ils sont survolés.
   Arrière-plan du corps	Couleur d’arrière-plan de la section du corps.
   Arrière-plan du pied de page	Couleur d’arrière-plan du pied de page.
   Texte du pied de page	Couleur du texte du pied de page.

7. Enregistrez et publiez les modifications.

Copier un thème prédéfini

1. Connectez-vous à Power Apps.

2. Sélectionnez Applications dans le volet gauche, puis le portail.

3. Sélectionnez Plus de commandes (...), puis Modifier.

4. Sélectionnez Thème dans le volet des composants.

5. Sélectionnez le thème parmi les préréglages que vous souhaitez copier, sélectionnez ..., puis Personnaliser.

   

6. Mettez à jour les détails du thème comme décrit dans la section précédente, puis enregistrez le thème.

Variables Sass

Sass est un langage de feuille de style avec une syntaxe compatible avec CSS. Lorsque vous activez la fonction de thème de base, vous pouvez utiliser des variables Sass au lieu de valeurs pour configurer les couleurs du thème.

Par exemple, si vous souhaitez que la couleur de l’En-tête soit à 25 pour cent plus claire que la couleur Primaire, vous pouvez utiliser la valeur suivante au lieu d’une couleur spécifique :

lighten($primaryColor, 25%);

Vous pouvez utiliser les variables Sass suivantes avec des thèmes de base :

Ordre de la variable Sass

Les variables Sass fonctionnent de haut en bas. Vous pouvez définir la couleur de l’En-tête sur lighten($primaryColor, 25%);. Mais vous ne pouvez pas définir la couleur Primaire sur lighten($headerColor, 25%);, car En-tête est situé sous Primaire dans la liste des options de couleur.

Éléments à prendre en compte pour les thèmes de base

• Vous ne pouvez pas avoir deux thèmes avec le même nom de thème ou le même nom de fichier de thème.
• Toute valeur de couleur que vous entrez manuellement doit correspondre à une couleur valide.
• Changer le CSS pour des thèmes prédéfinis n’est pas pris en charge.
• Le rapport de contraste des couleurs de premier plan et d’arrière-plan du thème est de 4,5:1, pour l’accessibilité.

Étapes suivantes

Modifier le thème CSS

Voir aussi

Portails Power Apps Studio
Créer et gérer des pages web
Éditeur WYSIWYG