Compartilhar via


Visão geral dos temas

Observação

Nos portais do Power Apps, o recurso Habilitar tema básico é definido como Desativado. Ao ativar esse recurso, você poderá usar temas padrão chamados Predefinições. Você também poderá criar cópias dos temas predefinidos para personalização adicional.

Neste artigo, você conhecerá o recurso de temas básicos. Para personalização avançada do tema, consulte Editar CSS.

Habilite temas básicos para portais existentes

  1. Entrar no Power Apps.

  2. Selecione Aplicativos no painel de navegação esquerdo e selecione o portal.

    Selecione Aplicativos e um portal.

  3. Selecione Mais Comando (...) e, em seguida, Editar.

    Editar um portal.

  4. Selecione Temas no painel de navegação esquerdo e ative a opção Habilitar tema básico.

    Habilitar tema básico.

Alterar um tema para seu portal

Você pode definir qualquer tema existente no seu portal para um tema padrão.

  1. Entre no Power Apps.

  2. Selecione Aplicativos no painel de navegação esquerdo e selecione o portal.

  3. Selecione Mais Comando (...) e, em seguida, Editar.

  4. Selecione Tema no painel de componentes.

    Selecionar o ícone do tema.

  5. Selecione qualquer tema padrão nas predefinições disponíveis (em nosso exemplo, selecionamos Verde).

    Selecionar um tema padrão.

O tema selecionado é aplicado ao seu portal.

Tema aplicado.

Observação

Depois de alterar o tema ou as propriedades do tema, como cores dentro do Studio, selecione Navegar no site para exibir as alterações em uma guia separada do navegador. Se você fizer várias alterações usando este método e alternar para páginas diferentes dentro do navegador, o cache do navegador desatualizado pode fazer com que seu navegador mostre alterações de tema que não sejam as mais recentes. Se isso acontecer, use Ctrl+F5 para recarregar a página.

Criar um tema

  1. Entrar no Power Apps.

  2. Selecione Aplicativos no painel de navegação esquerdo e selecione o portal.

  3. Selecione Mais Comando (...) e, em seguida, Editar.

  4. Selecione Tema no painel de componentes.

  5. Selecione Novo tema.

    Criar um tema.

Editar detalhes do tema

É possível atualizar o nome do tema, descrição, cor e outras configurações de tipografia no Power Apps Studio.

  1. Entre no Power Apps.

  2. Selecione Aplicativos no painel de navegação esquerdo e selecione o portal.

  3. Selecione Mais Comando (...) e, em seguida, Editar.

  4. Selecione Tema no painel de componentes.

  5. Selecione o tema atualmente aplicado ou selecione um novo tema nas predefinições. Selecionar um tema abre o painel de detalhes no lado direito do seu espaço de trabalho.

    Detalhes do tema.

  6. Edite detalhes do tema, como nome, descrição e cor, para diferentes áreas.

    Opções de cor Área afetada
    Primário Cores de botão e link.
    Cabeçalho Cor da tela de fundo do cabeçalho.
    Texto do menu de cabeçalho Cor do texto para o menu do cabeçalho.
    Foco do menu de cabeçalho Cor de fundo dos itens de menu quando o mouse é passado sobre eles.
    Plano de fundo do corpo Cor de fundo da seção do corpo.
    Tela de fundo do rodapé Cor de fundo para o rodapé.
    Texto do rodapé Cor do texto do rodapé.
  7. Salve e publique as alterações.

Copiar um tema predefinido

  1. Entre no Power Apps.

  2. Selecione Aplicativos no painel de navegação esquerdo e selecione o portal.

  3. Selecione Mais Comando (...) e, em seguida, Editar.

  4. Selecione Tema no painel de componentes.

  5. Selecione o tema nas predefinições que deseja copiar. Selecione ... e, em seguida, selecione Personalizar.

    Copiar tema predefinido.

  6. Atualize os detalhes do tema conforme descrito na seção anterior e salve o tema.

Variáveis Sass

Sass é uma linguagem de folha de estilo com sintaxe totalmente compatível com CSS. Quando você habilita o recurso de tema básico, pode usar Variáveis Sass em vez de valores para configurar as cores do tema.

Por exemplo, se você deseja que a cor Cabeçalho seja 25% mais clara que a cor Principal, use o seguinte valor em vez de uma cor específica:

lighten($primaryColor, 25%);

Exemplo de Sass.

Você pode usar as seguintes variáveis Sass com temas básicos:

Opções de cor Nome da variável Sass
Primário $primaryColor
Cabeçalho $headerColor
Texto do menu de cabeçalho $headerMenuTextColor
Foco do menu de cabeçalho $headerMenuHoverColor
Plano de fundo do corpo $bodyBackground
Tela de fundo do rodapé $footerColor
Texto do rodapé $footerTextColor

Ordem variável Sass

As variáveis Sass funcionam de cima para baixo. Você pode definir a cor do Cabeçalho como lighten($primaryColor, 25%);. Contudo, você não pode definir a cor Principal como lighten($headerColor, 25%); porque o Cabeçalho está abaixo de Principal na lista de opções de cores.

Considerações sobre temas básicos

  • Você não pode ter dois temas com o mesmo nome de tema ou o mesmo nome de arquivo de tema.
  • Qualquer valor de cor inserido manualmente deve ser de uma cor válida.
  • Não há suporte da alteração do CSS para temas predefinidos.
  • A cor de primeiro plano do tema recomendada e a taxa de contraste da cor de fundo é 4,5:1, para acessibilidade.

Próximas etapas

Editar CSS do tema

Consulte também

Studio de portais do Power Apps
Criar e gerenciar páginas da Web
Editor WYSIWYG

Observação

Você pode nos falar mais sobre suas preferências de idioma para documentação? Faça uma pesquisa rápida. (Observe que esta pesquisa está em inglês)

A pesquisa levará cerca de sete minutos. Nenhum dado pessoal é coletado (política de privacidade).