Partager via

Theming

La création de thèmes est un mécanisme par lequel appliquer une apparence et une convivialité cohérentes à tous les composants d’une page. Pour l’instant, cela signifie partager un jeu de couleurs sur toute la page.

Note

Un objet JSON de thème est un bloc de code contenant un ensemble de couleurs. Les composants du Kit du créateur sont conçus pour accepter le bloc de code Theme généré spécifiquement par l’application Concepteur de thèmes de Fluent UI et mapper ses valeurs de couleur sur les propriétés du composant. Enregistrez l’objet en tant que variable dans votre application (comme décrit dans les instructions suivantes). Bien que l’objet JSON de thème soit conçu pour être facilement référencé avec les composants du kit, tout composant externe au kit peut également référencer ces valeurs, ce qui permet de maintenir facilement la cohérence entre tous les composants de l’application.

Génération du thème

Utilisez l’application Concepteur de thèmes Fluent (fournie dans la solution CreatorKitReferences(Canvas)) pour générer un objet Json de thème qui peut être référencé par les composants du Kit du créateur.

  1. Ouvrez l’application Concepteur de thèmes Fluent.

  2. Modifiez les valeurs Couleur primaire, Couleur du texte et Couleur d’arrière-plan.

    Application Éditeur de thèmes.

  3. Dans le coin supérieur droit, sélectionnez Exporter le thème pour générer la version d’expression Power Fx du thème JSON et copiez la valeur à partir du volet.

    JSON de thème généré par l’application Éditeur de thèmes.

  4. Enregistrez le thème en tant que variable globale dans une application (section suivante).

Définition du thème

La formule Power Fx ci-dessous montre un exemple de définition d’une variable globale à l’aide de la sortie de l’application Concepteur de thèmes Fluent UI. Cette variable peut être référencée par tous les composants de l’application.

  • Placez cette formule Power Fx pour qu’elle s’exécute sur la propriété OnStart de l’application.
  • Remplacez la valeur entre les commentaires /* THEME OBJECT */ avec votre propre objet de thème issu du concepteur.
Set(
    AppTheme,
    /* START THEME OBJECT */
    {
        palette: {
            themePrimary: "#0078d4",
            themeLighterAlt: "#eff6fc",
            themeLighter: "#deecf9",
            themeLight: "#c7e0f4",
            themeTertiary: "#71afe5",
            themeSecondary: "#2b88d8",
            themeDarkAlt: "#106ebe",
            themeDark: "#005a9e",
            themeDarker: "#004578",
            neutralLighterAlt: "#faf9f8",
            neutralLighter: "#f3f2f1",
            neutralLight: "#edebe9",
            neutralQuaternaryAlt: "#e1dfdd",
            neutralQuaternary: "#d0d0d0",
            neutralTertiaryAlt: "#c8c6c4",
            neutralTertiary: "#a19f9d",
            neutralSecondary: "#605e5c",
            neutralPrimaryAlt: "#3b3a39",
            neutralPrimary:"#323130",
            neutralDark: "#201f1e",
            black: "#000000",
            white: "#ffffff"
        }
    }
    /* END THEME OBJECT */
);
Set(
    AppThemeJson,
    JSON(
        AppTheme,
        JSONFormat.IndentFour
    )
);

Faire référence à un thème à partir des composants du Kit du créateur

Un thème peut être transmis à la propriété Theme de chaque composant.

  • Les composants Canevas doivent faire référence à la variable AppTheme.
  • Les composants Code doivent faire référence à la variable AppThemeJson.

Faire référence à un thème à partir des composants Power Apps natifs

Tous les composants de base des applications canevas ou des pages personnalisées peuvent faire référence à des éléments de l’objet AppTheme (ne peut pas être au format Json). Ces contrôles doivent faire référence aux propriétés palette souhaitées et être convertis en type de données Couleur à l’aide de la formule ColorValue().

Exemple Button.Formule Fill Power Fx faisant référence à la couleur principale du thème :

ColorValue(AppTheme.palette.themePrimary)

Bouton utilisant le thème.

  • Last updated on