Usar temas modernos em aplicativos baseados em modelo

Os usuários de aplicativos baseados em modelo com aparência moderna e atualizada para aplicativos baseados em modelo habilitaram o estilo atualizado da experiência alinhado ao sistema de design Microsoft Fluent 2. Como esse visual moderno e atualizado vem com um novo sistema de temas, o tema clássico não tem suporte; no entanto, os criadores podem modificar as cores usadas pelo aplicativo para ajudar a alinhar-se à marca organizacional para os usuários que habilitaram o visual moderno e atualizado. Neste artigo, você aprenderá sobre as substituições de estilo disponíveis com a aparência moderna e atualizada e como implementá-las na sua organização.

Modificar o tema do aplicativo

[Este tópico faz parte da documentação de pré-lançamento e está sujeito a alterações.]

Com a aparência moderna e atualizada habilitada no aplicativo, os criadores podem criar um tema personalizado que ajuda a se alinhar à identidade visual organizacional. Com um tema personalizado, você pode alterar o cabeçalho do aplicativo, hiperlinks, pesquisas, botões principais, indicadores de guia ativos, seleção de linha e efeitos ao passar o mouse. O tema personalizado também permite alterar a fonte usada no aplicativo. Para fazer isso, você encapsula as informações de tema desejadas em um recurso XML, usa uma configuração de aplicativo para apontar para esse recurso da Web e verifica se o novo tema moderno corresponde às suas expectativas.

Visão geral do recurso XML de tema personalizado

A primeira etapa para criar um tema moderno personalizado é criar um arquivo XML com os parâmetros de tema desejados, com um ou mais dos seguintes atributos definidos dentro de uma marca CustomTheme.

• BasePaletteColor – A cor de propagação (código HEX) usada como base para gerar uma paleta de cores de 16 slots para o tema.
• LockPrimary – Um booliano que determina como a cor de propagação selecionada é usada para gerar a paleta de cores de 16 slots.
  • Falso (Padrão): A paleta é otimizada para acessibilidade, mas não garante que a cor da semente aparecerá em qualquer slot da paleta gerada. Esta é a configuração padrão. Use o Gerador de temas Fluent para versão preliminar a paleta gerada com base em suas seleções de basePaletteColor, vibrancy e hueTorsion.
  • True: A cor da semente é colocada no slot primário (meio) da paleta. As cores restantes são geradas tornando as cores incrementalmente mais claras de um lado e mais escuras do outro lado. A paleta gerada pode não atender aos requisitos de acessibilidade de taxa de contraste.
• Font - A fonte para seu tema personalizado. A fonte que está sendo renderizada pelo tema personalizado depende da capacidade do navegador e da máquina de destino de mostrar essa fonte.
• Vibrancy - Um parâmetro opcional que influencia a suavidade ou o brilho da paleta, especialmente das cores mais claras. Os valores permitidos estão entre -100 e 100, com um valor padrão de 0. Esta opção só é aplicável quando lockPrimary="true".
• HueTorsion - Um parâmetro opcional que influencia o matiz, a sombra ou o tom da paleta, especialmente das cores mais claras. Os valores permitidos estão entre -100 e 100, com um valor padrão de 0. Esta opção só é aplicável quando lockPrimary="true".

Substituir a paleta

A substituição de slots individuais na paleta de temas fornece ao criador controle total sobre as cores do slot, o que é particularmente útil quando modificações adicionais são necessárias além dos parâmetros de tema padrão mencionados acima. Para substituir um slot específico, atribua um valor ao slot desejado por seu nome. Por exemplo, você pode especificar o código HEX para darker70, primary ou lighter10 para adaptar a aparência precisamente à sua preferência. A definição de valores para todos os 16 slots substitui completamente todas as opções de paleta descritas na seção anterior, permitindo um esquema de cores altamente personalizado e exclusivo.

Os nomes de slot para a paleta do mais escuro para o mais claro são: darker70, darker60, …<>, darker10, primary, lighter10, lighter20, …, lighter80. Consulte o designer de Tema do Fluent para descobrir como esses slots são geralmente usados em controles do Fluent.

XML de exemplo de um tema personalizado

Como exemplo, esse XML especifica um tema personalizado que é verde com uma fonte diferente.

<CustomTheme 
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
/>

Esse XML especifica um tema personalizado usando o algoritmo de geração de paleta alternativa com uma substituição para um único slot.

<CustomTheme 
    basePaletteColor="#00FF00"
    lockPrimary="false"
    font="'GreatVibes', cursive"

    lighter70="#FFFFFF"
/>

Modificar as cores do cabeçalho do aplicativo

Os criadores podem personalizar o estilo do cabeçalho do aplicativo para se desviar do tema do aplicativo. Isso pode ser feito estendendo o XML criado para o tema moderno personalizado com um ou mais dos seguintes atributos definidos dentro de uma marca AppHeaderColors.

• Background – aplica-se à cor de fundo do cabeçalho do aplicativo. Esse elemento deve ser definido para que quaisquer alterações entrem em vigor.
• Foreground – aplica-se à cor do texto do cabeçalho do aplicativo. Se isso não for especificado, o sistema tentará calcular uma cor apropriada que tenha contraste suficiente com a cor de fundo fornecida.
• BackgroundHover – a cor de fundo dos botões no cabeçalho do aplicativo quando o mouse é passado sobre eles. Se nenhum valor for especificado, o sistema calcula uma cor com base na cor de fundo.
• ForegroundHover – a cor do texto dos botões no cabeçalho do aplicativo quando o mouse é passado sobre eles. Se nenhum valor for especificado, o sistema tentará calcular uma cor apropriada que tenha contraste suficiente com a cor backgroundHover.
• BackgroundPressed – a cor de fundo dos botões no cabeçalho do aplicativo quando eles são pressionados. A lógica padrão é a mesma que backgroundHover.
• ForegroundPressed – a cor do texto dos botões no cabeçalho do aplicativo quando eles são pressionados. A lógica padrão é a mesma que foregroundHover.
• BackgroundSelected – a cor de fundo dos botões no cabeçalho do aplicativo quando eles são selecionados. A lógica padrão é a mesma que backgroundHover.
• ForegroundSelected – a cor do texto dos botões no cabeçalho do aplicativo quando eles são selecionados. A lógica padrão é a mesma que backgroundHover.

Exemplo de XML para um tema moderno

Como exemplo, esse XML estende o tema personalizado verde com um cabeçalho de aplicativo preto. Para uma usabilidade ideal, recomendamos especificar valores de cor diferentes para cada estado de interação.

<CustomTheme
    basePaletteColor="#00FF00"
    vibrancy="0"
    hueTorsion="-50"
    font="'GreatVibes', cursive"
>  
  <AppHeaderColors
    background="#000000" 
    foreground="#FFFFFF" 
    backgroundHover="#313131" 
    foregroundHover="#FFFFFF"
    backgroundPressed="#494949"
    foregroundPressed="#FFFFFF"
    backgroundSelected="#717171" 
    foregroundSelected="#FFFFFF"  
  />
</CustomTheme>

Criar o recurso da Web

1. Usando um editor de texto ou de XML, salve o XML usado para criar o recurso da Web. Exemplo de XML para um tema moderno

2. Entre no Power Apps.

3. Selecione Soluções no painel de navegação esquerdo e, em seguida, crie uma Nova solução.

4. Selecione Novo>Mais>Recurso da Web.

5. Selecione Escolher arquivo, procure e selecione o texto do arquivo XML criado anteriormente.

6. No painel de propriedades Novo recurso da Web, informe os seguintes valores:

   • Nome de exibição: Informe um nome de exibição, como Tema verde personalizado.
   • Nome. Aceite o nome gerado automaticamente ou insira um nome exclusivo para o recurso da Web.
   • Tipo: Dados (XML)

7. Selecione Salvar. Você publica essa personalização seguindo as etapas da próxima seção.

Aplicar o tema personalizado a aplicativos em seu ambiente

Depois de selecionar suas cores e criar o recurso da Web, siga estas etapas para habilitar esse estilo de cabeçalho de aplicativo para todos os aplicativos em seu ambiente que tenham a Nova aparência habilitada.

1. Na solução que você usou para criar o recurso da Web, selecione Adicionar existente>Mais>Configuração.
2. Digite tema personalizado na caixa Pesquisar, selecione Definição de tema personalizado, escolha Avançar e selecione Adicionar.
3. Na solução, selecione Definição de tema personalizado e, em seguida, escolha Editar na barra de comandos.
4. No painel direito da propriedades Editar definição de tema personalizado, selecione Novo valor de ambiente em Definindo valor de ambiente e insira o nome exclusivo do recurso da Web criado anteriormente (observe a coluna Nome na solução para o nome exclusivo). Remova as aspas duplas e certifique-se de adicionar o prefixo do editor para o recurso da Web. Por exemplo, o nome pode aparecer como contoso_green-custom-theme como neste exemplo.
5. Selecione Salvar.
6. Selecione Configurações no painel esquerdo Objetos e, em seguida, selecione Publicar todas as personalizações na barra de comandos. (Esse comando é exibido quando nenhum componente da solução está selecionado).

Aplicativo baseado em modelo personalizado usando o exemplo de tema verde estendido.

Verificando novas cores de cabeçalho do aplicativo

Depois de publicar seu tema personalizado, convém validar a aplicação do tema no aplicativo para garantir que tudo apareça como esperado.

Modificar somente as cores do cabeçalho do aplicativo

Os criadores podem optar por personalizar apenas o estilo do cabeçalho do aplicativo para se desviar do tema padrão do aplicativo. Isso pode ser feito usando estas etapas:

1. Crie um arquivo XML com suas várias seleções de cores, com um ou mais dos atributos da seção de substituições de cores do cabeçalho do aplicativo definidos dentro de uma marca AppHeaderColors.
2. Crie um recurso web usando o mesmo processo descrito para temas personalizados, mas certifique-se de dar ao recurso XML um nome de exibição descritivo apropriado, como XML de cabeçalho de aplicativo verde.
3. Aplique cores de cabeçalho de aplicativo personalizadas a aplicativos em seu ambiente atribuindo esse recurso web ao ambiente ou aplicativo na configuração Substituir cor do cabeçalho do aplicativo. Siga as etapas em Aplicando temas personalizados ao seu ambiente, mas use a configuração Substituir cor do cabeçalho do aplicativo.

   Observação

   Qualquer configuração definida em Substituir cor do cabeçalho do aplicativo será ignorada se a configuração Definição de tema personalizado tiver sido definida.

4. Verifique os elementos visuais do cabeçalho do aplicativo personalizado, incluindo todos os estados de botão, para garantir que tudo apareça como esperado e que haja taxas de contraste suficientes para acessibilidade. Você deve verificar as seguintes opções de cores:
   • As cores desejadas são mostradas para o cabeçalho do aplicativo em repouso e para cada estado de interação do botão.
   • Há uma taxa de contraste mínima de 4,5:1 entre as cores de primeiro plano e de fundo para o estado de repouso e cada estado de interação do botão.

XML de exemplo para substituição de cor de cabeçalho de aplicativo

Como um exemplo, este XML especifica uma cor de fundo verde para o cabeçalho do aplicativo com texto branco, com cores de fundo mais escuras para os vários estados de interação do botão. Para uma usabilidade ideal, recomendamos especificar valores de cores diferentes para cada estado.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Com essa configuração, o cabeçalho do aplicativo deve ter a seguinte aparência quando você reproduzir o aplicativo. Talvez seja necessário atualizar a guia do navegador para exibir o tema.

Consultar também

Tema clássico

Aparência moderna e atualizada