Theming

O tema é um mecanismo pelo qual uma aparência consistente pode ser aplicada a todos os componentes de uma página. Por enquanto, isso significa compartilhar um esquema de cores em toda a página.

Nota

Um objeto Tema Json é um bloco de código que contém um conjunto de cores. Os componentes do Kit do criador são projetados para aceitar o bloco de código do Tema gerado especificamente pelo aplicativo Fluent Theme Designer e mapear seus valores de cor para as propriedades do componente. Salve o objeto como uma variável em seu aplicativo (conforme descrito nas instruções a seguir). Embora um objeto do Tema Json seja designado para ser facilmente referenciado com componentes do kit, qualquer componente fora do kit também pode referenciar esses valores, o que ajuda a manter facilmente a consistência em todos os componentes do aplicativo.

Como gerar o tema

Use o aplicativo Fluent Theme Designer (fornecido na solução CreatorKitReferences(Canvas)) para gerar um objeto Json de tema que pode ser referenciado pelos componentes do Kit do criador.

1. Execute o aplicativo Fluent Theme Designer.

2. Modifique os valores de Cor primária, Cor do texto e Cor de fundo.

   

3. No canto superior direito, selecione Exportar tema para gerar a versão da expressão Power Fx do Tema JSON e copie o valor do painel.

   

4. Salve o tema como uma variável global em um aplicativo (próxima seção).

Como configurar o tema

A fórmula do Power Fx abaixo mostra um exemplo de como definir uma variável global usando a saída do aplicativo Fluent UI Theme Designer. Essa variável pode ser referenciada por todos os componentes do aplicativo.

• Coloque esta fórmula do Power Fx para ser executada na propriedade OnStart do aplicativo.
• Substitua o valor entre os comentários /* THEME OBJECT */ pelo próprio objeto do tema do designer.

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

Como referenciar o tema dos componentes do Kit do criador

Um tema pode ser transmitido para a propriedade Theme de cada componente.

• Os componentes do Canvas devem fazer referência à variável. AppTheme
• Os componentes de código devem fazer referência à variável. AppThemeJson

Como referenciar o tema dos componentes do Power Apps

Qualquer componente principal em aplicativos de tela ou páginas personalizadas pode fazer referência a elementos do objeto AppTheme (não pode ser formatado em Json). Esses controles devem fazer referência às propriedades palette desejadas e devem ser convertidos como um tipo de dados Cor usando a fórmula ColorValue().

Exemplo Button.Fill Power Fx fórmula que faz referência à cor primária do tema:

ColorValue(AppTheme.palette.themePrimary)