Theming

Els temes és un mecanisme pel qual es poden aplicar un disseny i un aspecte coherents a tots els components d'una pàgina. Per ara, això vol dir que es comparteix una combinació de colors a tota la pàgina.

Nota

Un objecte Json de tema és un bloc de codi que conté un conjunt de colors. Els components del Kit de creador estan dissenyats per acceptar el bloc de codi de tema generat específicament per l'aplicació Fluent Theme Designer i assignar-ne els valors de color a les propietats dels components. Deseu l'objecte com una variable a l'aplicació (segons s'indica a les instruccions següents). Tot i que els components del kit poden fer referència fàcilment a un objecte Json de Tema, qualsevol component extern del kit també pot fer referència a aquests valors, la qual cosa ajuda a mantenir fàcilment la coherència en tots els components de l'aplicació.

Generar el tema

Utilitzeu l'aplicació Fluent Theme Designer (proporcionada a la solució CreatorKitReferences(Canvas)) per generar un objecte Json de tema al qual els components del Kit de creadors puguin fer referència.

1. Executeu l'aplicació Fluent Theme Designer.

2. Modifiqueu els valors Color principal, Color del text i Color de fons.

   

3. A la part superior dreta, seleccioneu Exporta el tema per generar la versió d'expressió del Power Fx del JSON del tema i, a continuació, copieu el valor de la subfinestra.

   

4. Deseu el tema com a variable global en una aplicació (secció següent).

Configuració del tema

A la fórmula de Power Fx de sota es mostra un exemple de com definir una variable global utilitzant la sortida de l'aplicació Fluent UI Theme Designer. Tots els components de l'aplicació poden fer referència a aquesta variable.

• Col·loeu aquesta fórmula del Power Fx a la propietat OnStart de l'aplicació.
• Substituïu el valor entre els comentaris /* THEME OBJECT */ per un objecte de tema propi del dissenyador.

Power Fx

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
    )
);

Tema de referència dels components del Kit de creadors

Es pot passar un tema a la propietat Theme de cada component.

• Els components del llenç han de fer referència a la AppTheme variable.
• Els components del codi han de fer referència a la AppThemeJson variable.

Tema de referència dels components del Power Apps natius

Qualsevol dels components principals de les aplicacions de llenç o de les pàgines personalitzades pot fer referència als elements de l'objecte AppTheme (no pot tenir format Json). Aquests controls han de fer referència a les propietats palette desitjades i convertir-se com un tipus de dades de color mitjançant la fórmula ColorValue().

Button d'exemple.Fill Power Fx fórmula que fa referència al color primari del tema:

Power Fx

ColorValue(AppTheme.palette.themePrimary)