Descrición xeral dos temas

Artigo
03/02/2022
2 minutos de lectura

Nos portais de Power Apps, a función Activar o tema básico está configurada en Desactivado. Cando activa esta característica, pode usar temas predeterminados chamados Preestablecidos. Tamén pode crear copias dos temas preestablecidos para a personalización adicional.

Neste artigo, percorrerá a función de temas básicos. Para ver a personalización avanzada do tema, consulte Editar CSS.

Activar temas básicos para portais existentes

Inicie sesión en Power Apps.
No panel de navegación da esquerda, seleccione Aplicacións e, a seguir, seleccione o portal.
Seleccione Máis Comandos (...) e, a seguir, seleccione Editar.
Seleccione Temas dende o panel de navegación esquerdo e logo active a opción Activar o tema básico.

Cambiar un tema para o portal

Pode configurar calquera tema existente no seu portal a un tema predeterminado.

Inicie sesión en Power Apps.
No panel de navegación da esquerda, seleccione Aplicacións e, a seguir, seleccione o portal.
Seleccione Máis Comandos (...) e, a seguir, seleccione Editar.
Seleccione Tema desde o panel de compoñentes.
Seleccione calquera tema predeterminado dos preestablecidos dispoñibles (no noso exemplo, seleccionamos Verde).

O tema seleccionado aplícase ao seu portal.

Tema aplicado.

Nota

Despois de cambiar o tema ou as propiedades do tema como as cores dentro de Studio, seleccione Buscar sitio web para ver os cambios nun separador independente do navegador. Se fai varios cambios usando este método e cambia a diferentes páxinas dentro do navegador, a caché obsoleta do navegador pode facer que o seu navegador mostre cambios de tema que non sexan os máis recentes. Se isto ocorre, use Ctrl + F5 para recargar a páxina.

Crear un novo tema

Inicie sesión en Power Apps.
No panel de navegación da esquerda, seleccione Aplicacións e, a seguir, seleccione o portal.
Seleccione Máis Comandos (...) e, a seguir, seleccione Editar.
Seleccione Tema desde o panel de compoñentes.
Seleccione Novo tema.

Editar detalles do tema

Pode actualizar o nome do tema, a descrición, a cor e outras opcións de tipografía en Power Apps Studio.

Inicie sesión en Power Apps.
No panel de navegación da esquerda, seleccione Aplicacións e, a seguir, seleccione o portal.
Seleccione Máis Comandos (...) e, a seguir, seleccione Editar.
Seleccione Tema desde o panel de compoñentes.
Seleccione o tema que se aplica actualmente ou seleccione un tema novo dos valores predefinidos. Seleccionar un tema abre o panel de detalles no lado dereito do seu espazo de traballo.

Edite os detalles do tema como o nome, a descrición e a cor para diferentes áreas.

Opción de cor	Zona afectada
Principal	Cores dos botóns e das ligazóns.
Cabeceira	Cor de fondo da cabeceira.
Texto do menú da cabeceira	Cor de texto para o menú de cabeceira.
Apunte do menú da cabeceira	Cor de fondo dos elementos do menú cando se pasa o cursor por riba.
Fondo do corpo	Cor de fondo da sección do corpo.
Fondo do pé de páxina	Cor de fondo do pé de páxina.
Texto do pé de páxina	Cor do texto do pé de páxina.

Garde e publique as modificacións.

Copiar un tema preestablecido

Inicie sesión en Power Apps.
No panel de navegación da esquerda, seleccione Aplicacións e, a seguir, seleccione o portal.
Seleccione Máis Comandos (...) e, a seguir, seleccione Editar.
Seleccione Tema desde o panel de compoñentes.
Seleccione o tema entre os predefinidos que desexa copiar e seleccione ... e, a continuación, seleccione Personalizar.
Actualice os detalles do tema como se describe na sección anterior e, a continuación, garde o tema.

variables Sass

Sass é unha linguaxe de follas de estilo con sintaxe totalmente compatible con CSS. Cando active a función de tema básico, pode empregar Variables Sass en lugar dos valores para configurar as cores do tema.

Por exemplo, se queres que a cor da Cabeceira sexa un 25 por cento máis clara que a cor Primaria, pode usar o seguinte valor en vez dunha cor específica:

lighten($primaryColor, 25%);

Exemplo de Sass.

Pode usar as seguintes variables Sass con temas básicos:

Opción de cor	Nome de variable Sass
Principal	`$primaryColor`
Cabeceira	`$headerColor`
Texto do menú da cabeceira	`$headerMenuTextColor`
Apunte do menú da cabeceira	`$headerMenuHoverColor`
Fondo do corpo	`$bodyBackground`
Fondo do pé de páxina	`$footerColor`
Texto do pé de páxina	`$footerTextColor`

Orde de variable Sass

As variables Sass funcionan de arriba abaixo. Pode configurar a cor de Cabeceira en lighten($primaryColor, 25%);. Pero non pode configurar a cor Primaria en lighten($headerColor, 25%); porque a Cabeceira está por debaixo de Primaria na lista de opcións de cor.

Consideracións sobre temas básicos

Non pode ter dous temas co mesmo nome de tema ou o mesmo nome de ficheiro de tema.
Calquera valor de cor que introduza manualmente debe ser para unha cor válida.
Cambiar o CSS para temas preestablecidos non é compatible.
A relación de contraste recomendada entre a cor de primeiro plano e de segundo plano do tema é de 4,5:1, para a accesibilidade.

Pasos seguintes

Editar o tema CSS

Consulte tamén

Estudo de portais de Power Apps
Crear e xestionar páxinas web
Editor WYSIWYG