Usar temas modernos en aplicaciones de lienzo

Los temas modernos son conjuntos de estilos preestablecidos que transforman el aspecto de la aplicación de lienzo en Power Apps. Estos temas, basados en el lenguaje de diseño Fluent de Microsoft, modifican varios aspectos de estilo, como color, tipografía, bordes y sombras, lo que garantiza una interfaz visualmente agradable que simplifica el desarrollo de aplicaciones.

Los temas modernos permiten a los creadores diseñar aplicaciones sin esfuerzo con un atractivo visual unificado y coherente, lo que reduce el tiempo de personalización y mantiene la estética profesional.

Requisitos previos

Habilite la característica de temas modernos en la configuración de una aplicación:

1. Abra su aplicación o cree una nueva.
2. Desde la aplicación, abra Configuración en el menú de creación de aplicaciones o en la barra de comandos moderna.
3. Vaya a Actualizaciones>Nueva>Temas y controles modernos.
4. Luego, ponga la alternancia para Controles y temas modernos en Activado.
5. Cierre la ventana emergente Configuración.

Para obtener más información, consulta Habilitar controles y temas modernos para tu aplicación.

Crear un tema

Usa los temas disponibles para aplicar estilo a tu aplicación. O bien, diseñe su propio tema para una estética visual más personalizada. También puede pegar un tema del formato YAML.

1. En el menú de creación de aplicaciones, seleccione Temas..

2. En el panel Temas, seleccione Agregar un tema.

3. Seleccione Crear tema personalizado para diseñar un tema nuevo o seleccione Pegar tema para importar un tema a partir del formato YAML. Para obtener más información sobre el pegado de temas, vea Copiar y pegar temas.

   Aparece el cuadro de diálogo Crear un tema.

   

4. En el cuadro de diálogo Crear un tema, elija o introduzca la siguiente información:

   Característica	Acción o descripción
   Color primario (semilla)	Elegir un color del selector de color. También puede introducir hexadecimal o RGB manualmente.
   Bloquear color principal (versión preliminar)	La paleta de temas de 16 ranuras se genera utilizando el color semilla. - Desactivado: la paleta de 16 ranuras está optimizada para la accesibilidad. Desactivada es la opción predeterminada. - Activado: el color de la semilla se coloca en la ranura principal (media) de la paleta. Los colores restantes se generan haciendo que los colores sean gradualmente más claros en un lado y más oscuros en el otro lado. Es posible que la paleta generada no cumpla los requisitos de relación de contraste relativos para accesibilidad.
   Nombre del tema	Especifique un nombre de tema único.
   Font	Elige la fuente predeterminada utilizada por los controles en la aplicación.
   Torsión	Afecta el tono, sombra o matiz de la paleta. La opción no es aplicable si elige Bloquear color primario.
   Vitalidad	Influye en la saturación o el brillo de la paleta. Vitalidad no es aplicable si elige Bloquear color primario.
   Invalidaciones de paleta	Invalide el color usado para una o varias ranuras de la paleta seleccionando una ranura y eligiendo un nuevo color. Seleccione Restablecer para volver al valor generado de esa ranura.

   También puede ver una vista previa estática del nuevo tema. Interactúe con los controles de ejemplo para ver cómo se aplica el tema al estado de resto y a varios estados de interacción.

   

5. Seleccione Crear. Su nuevo tema se crea y se aplica a su aplicación.

Copiar y pegar temas

Puede copiar y pegar temas en formato YAML para duplicar temas dentro de la aplicación o compartirlos en diferentes aplicaciones. Este enfoque facilita el mantenimiento de la personalización de marca coherente en varias aplicaciones o la copia de seguridad de las configuraciones de temas personalizadas.

Copiar un tema

Para copiar la definición de YAML de un tema:

1. En el menú de creación de aplicaciones, seleccione Temas..

2. En el panel Temas , busque el tema que desea copiar.

3. Seleccione el botón Más opciones (...) de la tarjeta de tema y, a continuación, seleccione Copiar tema.

   

La definición del tema se copia en el Portapapeles en formato YAML.

Pegar un tema

Para pegar un tema de YAML:

1. Copie una definición de YAML de tema válida en el Portapapeles.

2. En el menú de creación de aplicaciones, seleccione Temas..

3. En el panel Temas, seleccione Agregar un tema.

4. Seleccione Pegar tema.

   

El nuevo tema se crea y aparece en la lista de temas con el nombre especificado en YAML. Si ya existe un tema con el mismo nombre, se cambia automáticamente el nombre del tema pegado para evitar conflictos.

Formato YAML

Las definiciones de tema usan la siguiente estructura YAML:

Themes:
  Theme Name:
    Font: "'Segoe UI', 'Open Sans', sans-serif"
    BasePaletteColor: '#2e4bf0'
    HueTorsion: -27
    Vibrancy: -52
    ColorOverrides:
      Lighter30: '#bd3535'
      Darker10: '#1a2d8f'

En la tabla siguiente se describe cada propiedad en formato YAML:

Ejemplo: Compartir un tema de marca corporativa

En este ejemplo se muestra un tema configurado con colores de marca corporativa:

Themes:
  Corporate Brand:
    Font: "'Segoe UI', 'Open Sans', sans-serif"
    BasePaletteColor: '#0078d4'
    HueTorsion: 0
    Vibrancy: 10
    ColorOverrides:
      Base: '#0078d4'
      Darker10: '#106ebe'
      Darker20: '#005a9e'
      Lighter10: '#2b88d8'
      Lighter20: '#c7e0f4'

Para usar este tema en otra aplicación:

1. Copie el código YAML.
2. Abra la aplicación de destino en Power Apps Studio.
3. En el panel Temas, seleccione Agregar un temaPegar tema>.

El tema Marca corporativa ya está disponible en la aplicación.

Sugerencias para usar copiar y pegar con temas

• Guardar temas externamente: copie y guarde los temas personalizados en un archivo de texto o en un sistema de documentación para copias de seguridad y control de versiones.
• Compartir entre equipos: comparta definiciones de YAML de tema con miembros del equipo para garantizar una personalización de marca coherente en varias aplicaciones.
• Duplicar y modificar: para crear variaciones de tema, copie un tema existente, péguelo y, a continuación, modifique las propiedades de YAML en lugar de empezar desde cero.
• Disponibilidad de fuentes: al pegar temas en aplicaciones u organizaciones, asegúrese de que las familias de fuentes especificadas estén disponibles y con licencia adecuada.
• Invalidaciones mínimas: para un mantenimiento más sencillo, especifique solo ColorOverrides los colores que deben diferir de la paleta generada. Deje que las BasePaletteColorpropiedades , HueTorsiony Vibrancy controle el resto.
• Accesibilidad de prueba: después de pegar un tema, pruóbelo en vistas móviles y de escritorio para garantizar que el contraste de color y la legibilidad cumplan los estándares de accesibilidad (WCAG 2.1 AA mínimo).

Aplicar un tema moderno

1. En el menú de creación de aplicaciones, seleccione Temas..
2. En el panel Temas, seleccione uno de los temas predeterminados.
3. Si tienes controles clásicos en la aplicación, se te pedirá que apliques el tema moderno a estos controles. Siempre puedes alinear Deshacer desde la barra de comandos si no te gusta el tema.

   Nota

   Cuando elige aplicar temas modernos a controles clásicos, Power Fx se establecen fórmulas en las propiedades de los controles afectados que hacen referencia a variables del tema moderno. Visualmente, los controles clásicos podrían no alinearse exactamente con sus homólogos de control modernos, ya que los controles clásicos no se basan en Fluent v9.

Al seleccionar un tema moderno, el estilo del tema se aplica automáticamente a los controles de la aplicación. Esta acción establece la propiedad App.Theme.

Editar un tema

Puede editar un tema y cambiar uno o varios parámetros del tema personalizado.

1. En el menú de creación de aplicaciones, seleccione Temas..

2. En el panel Temas , busque el icono del tema que desea editar. Seleccione el menú de desbordamiento y, a continuación, seleccione Editar.

   

3. En el panel Editar tema, ajuste el tema según sea necesario.

4. Seleccione Guardar o cancelar y salir del cuadro de diálogo.

Eliminar un tema

Si ya no necesita un tema personalizado en la aplicación, puede eliminarlo.

1. En el menú de creación de aplicaciones, seleccione Temas..
2. En el panel Temas , busque el tema que desea eliminar, seleccione el menú de desbordamiento y, a continuación, seleccione Eliminar.
3. En el cuadro de diálogo de confirmación, seleccione Eliminar tema.

Si la aplicación tiene alguna fórmula de Power Fx que haga referencia a este tema, deberá actualizar manualmente la fórmula.

Usar temas con Power Fx

Los creadores pueden usar objetos de tema modernos a través de Power Fx. Haga referencia al objeto de tema activo actualmente mediante App.Theme. Haga referencia a cualquier tema cargado en la aplicación por su nombre de instancia, como RedTheme. Para asegurarse de que las selecciones de color se adapten a los cambios de tema, haga referencia al objeto de tema mediante App.Theme.

Cada objeto de tema incluye la información siguiente:

• Nombre del tema
• Colores, una colección de rampas de marca de 16 colores a la que se puede acceder individualmente por nombre; El color de primer plano principal es el color de texto predeterminado, como el color del texto en un fondo.
• Fuente utilizada en el tema

En la imagen siguiente se muestran las variables de ranura dentro de la colección Colors y, por ejemplo, los colores correspondientes para el tema Steel .

Mediante el uso de la rampa de marca de tema, puedes aplicar un estilo manual a un control clásico basado en el tema moderno actual. Por ejemplo, establezca Button.Fill = App.Theme.Colors.Primary.

Consulte también

Entrada de blog Sobre eluso de temas modernos con Power Apps (vídeo)