Compartir a través de

Usar colores del tema en las personalizaciones de SharePoint Framework

  • Artículo

Al crear personalizaciones de SharePoint Framework, debe usar colores de tema para que las personalizaciones parezcan una parte del sitio. En este artículo se explica cómo puede hacer referencia a los colores del tema del sitio de contexto en la solución de SharePoint Framework.

Nota:

Aunque en este artículo se usa un elemento web del lado cliente de SharePoint Framework como ejemplo, las técnicas descritas se aplican a todos los tipos de personalizaciones de SharePoint Framework.

Colores fijos frente a colores del tema

Al aplicar scaffolding a un nuevo SharePoint Framework elemento web del lado cliente, usa una paleta azul fija. Cuando se agrega un elemento web de este tipo en un sitio moderno mediante una combinación de colores diferente, se destaca y no se parece a una parte del sitio.

Elemento web del lado cliente de SharePoint Framework con la combinación de colores en tonos azules en un sitio de grupo moderno con el tema rojo

Al usar colores fijos, decide por adelantado qué colores desea usar para qué elementos. Esto puede dar lugar a una situación como la que se acaba de ilustrar, donde un elemento web azul se muestra en un sitio de equipo rojo, destacando innecesariamente. En la mayoría de los casos, debe esforzarse por aprovechar los colores del tema del sitio de contexto para que la solución no se destaque, sino que se parezca a una parte del sitio.

En lugar de usar colores fijos, SharePoint Framework permite hacer referencia a los colores del tema del sitio de contexto. Como resultado, si el elemento web se coloca en un sitio que usa un tema rojo, también usa la paleta roja y, si se coloca en un sitio que usa el tema azul, se ajusta automáticamente para usar la paleta azul. Todo esto se realiza automáticamente sin cambios en el código del elemento web entre sí.

Usar colores del tema en SharePoint Framework

Al trabajar con colores fijos, debe especificarlos en las propiedades CSS, por ejemplo:

.button {
  background-color: #0078d7;
}

Para usar un color del tema en su lugar, reemplace el color fijo con un token de tema:

.button {
  background-color: "[theme: themePrimary, default: #0078d7]";
}

Cuando la personalización de SharePoint Framework se carga en la página, el paquete @microsoft/load-themed-styles, que forma parte del SharePoint Framework, busca tokens de tema en archivos CSS e intenta reemplazarlos por el color correspondiente del tema actual. Si el valor del token especificado no está disponible, SharePoint Framework usa el valor especificado mediante el parámetro predeterminado, por lo que es importante incluirlo siempre.

Usar colores del tema en las personalizaciones

Al aplicar scaffolding a un nuevo SharePoint Framework elemento web del lado cliente, de forma predeterminada, usa la paleta azul fija. En los pasos siguientes se describen los ajustes necesarios para que el elemento web use colores de tema en su lugar.

Nota:

Los pasos siguientes se aplican a un elemento web del lado cliente SharePoint Framework denominado HelloWorld creado mediante React. En el caso de los elementos web creados con diferentes bibliotecas y otros tipos de personalizaciones, es posible que tenga que ajustar las modificaciones en consecuencia.

Para usar colores del tema

  1. En el editor de código, abra el archivo ./src/webparts/helloWorld/components/HelloWorld.tsx y elimine la clase ms-bgColor-themeDark de la etiqueta div con la clase ms-Grid-row.

    Clase

  2. En la misma carpeta, abra el archivo HelloWorld.module.scss . Cambie el .row selector a:

    .row {
  padding: 20px;
  background-color: "[theme: themeDark, default: #005a9e]";
}

    Selector .row ampliado con color de fondo

  3. En el selector .button, cambie las propiedades background-color y border-color por:

    .button {
  /* ... */
  background-color: "[theme: themePrimary, default: #0078d7]";
  border-color: "[theme: themePrimary, default: #0078d7]";
  /* ... */
}

    Selector .button actualizado con referencias a los colores del tema

  4. Al agregar el elemento web a un sitio, los colores usados por el elemento web se adaptan automáticamente a los colores del tema usados por el sitio actual.

    Vista en paralelo del mismo elemento web que se muestra en dos sitios con colores diferentes. El elemento web sigue la combinación de colores de cada sitio web

Soporte para fondos de sección

Es posible que una personalización con colores de tema siga destacando si no responde a los cambios de fondo de la sección a través del soporte de variaciones de tema. Para obtener más información, consulte Soporte para fondos de sección.

Un elemento web no compatible con las variaciones de tema usa un fondo blanco, independientemente del color de fondo de la sección seleccionada.

personalización no compatible con las variaciones de tema

Un elemento web configurado para admitir variaciones de tema puede aplicar el fondo de la sección al fondo del elemento web.

personalización compatible con las variaciones de tema

Tokens de tema disponibles y sus instancias

En el contexto de los sitios de SharePoint modernos, los valores asociados a los tokens de tema tienen numerosas instancias en el front-end, la página del sistema y la interfaz de usuario de elementos web de SharePoint. Para que se adapten mejor a la apariencia general, debería considerar el uso de tokens de tema adecuados.

Se pueden usar los siguientes tokens de tema:

Nota:

Los valores predeterminados que aparecen a continuación se corresponden con los predeterminados de un sitio de grupo moderno al usar la paleta roja.

Token Predeterminado Comentarios
themeDark #7c1d21 Algún botón al hacer clic y algún color de vínculo (por ejemplo, "Volver a la versión clásica de SharePoint"). Icono de estrella "Seguir" de encabezado si se usa la opción del tercer color de fondo de encabezado. Páginas del sistema: borde y activación del botón Aceptar.
themeDarkAlt #932227 Muchos iconos (como, por ejemplo, en la barra de comandos), algunos bordes, movimientos del puntero sobre botones o vínculos, fondo de indicadores giratorios, foco de elementos de intervalo, activación de fondo de casillas de verificación, listas y elementos web, activación de botones e iconos de añadir elemento web cuando está seleccionado el tercer color de fondo de la sección.
themeDarker #5b1519 Color de activación de algunos vínculos. Páginas del sistema: color de vínculo visitado.
themeLight #e3afb2 Activación de selector de intervalo y fondo de foco. Color de fondo de indicador giratorio de carga en la vista de contenidos del sitio.
themeLighter #f0d3d4 Color de fondo del menú de edición de navegación, color de fondo de activación del panel Agregar un elemento web, color de fondo de imagen en algunos elementos web cuando está seleccionada la tercera opción de color de fondo de la sección. Páginas del sistema: fondo de activación de navegación, fondo de activación del botón Cancelar.
themeLighterAlt #fbf4f4 Una de las opciones de fondo de sección. Fondo de activación del menú de rueda dentada en la vista de contenidos del sitio.
themePrimary #a4262c Algunos fondos de botones y casillas de verificación, vínculos, textos, bordes e iconos, activación de iconos y vínculos. También el color de fondo del pie de página y una de las opciones de fondo de sección. Páginas del sistema: fondo del botón Aceptar, textos de vínculo.
themeSecondary #ae383e Texto de la barra de conjunto de aplicaciones en la vista de contenidos del sitio. Color de activación de algunos vínculos. Color de fondo de imagen en algunos elementos web cuando está seleccionado el cuarto color de fondo de sección. El segundo color del icono de la paleta en el "panel Cambiar el aspecto" (de ahí el nombre del token).
themeTertiary #c86c70 Icono de agregar elemento web cuando está seleccionado el cuarto color de fondo de selección. El tercer color del icono de la paleta en el "panel Cambiar el aspecto" (de ahí el nombre del token).
neutralDark #212121 Algún botón, vínculo y activación de texto de borde, algunos iconos. Páginas del sistema: ruta de navegación de página, textos de encabezado.
neutralLight #eaeaea Algunos bordes de elementos web, activación de acción de la barra de comandos y fondo de la barra de comandos cuando se selecciona un elemento de lista; fondo de encabezado de categoría de vista de lista cuando hay un elemento seleccionado, activación de botón. Páginas del sistema: fondo de pestañas de la cinta de opciones, borde del botón Aceptar, fondo del elemento de navegación seleccionado, borde de cuadros de texto deshabilitados. Elemento web de división. Color de fondo de imagen en algunos elementos web cuando está seleccionado el segundo color de fondo de sección.
neutralLighter #f4f4f4 Algunos fondos de menú (p.ej., la barra de comandos), el elemento de navegación izquierdo seleccionado, los fondos de algunos botones, una de las opciones de color de fondo de una sección.
neutralLighterAlt #f8f8f8 Fondo de activación de navegación izquierda, fondo del texto del panel información de lista, color de fondo de imagen en algunos elementos web cuando se selecciona el primer color de fondo de sección, algunos iconos y textos al editar elementos web. Páginas del sistema: fondo del botón Cancelar, fondo de cuadros de texto deshabilitados.
neutralPrimary #333333 Texto de encabezado de sitio, textos del menú de navegación, barra de comandos, botones y elementos web, fondos de iconos relacionados con el elemento web cuando la página se encuentra en el modo de edición, iconos y textos del panel Agregar elementos web, textos del panel de configuración de elementos web. Páginas del sistema: color de flecha desplegable, algunos textos.
neutralPrimaryAlt #3c3c3c El fondo de la barra del conjunto de aplicaciones en la vista de contenidos del sitio.
neutralSecondary #666666 Algunos textos de menús, texto de biblioteca vacía, algunos fondos de activación de iconos, algunos textos de elementos web, flechas de la barra de comandos, el selector de intervalo. Páginas del sistema: color de vínculos, algunos iconos y bordes.
neutralTertiary #a6a6a6 Algunos textos de botones, algunos títulos de elementos web, algunos textos de la configuración de elementos web, algunos iconos de elementos web y la activación de bordes en algunos elementos web, borde discontinuo de una sección en el modo de edición, borde de control del panel de configuración de elementos web. Lo más visible al editar elementos web. Páginas del sistema: cuadro de texto, lista desplegable y color de borde de botón.
neutralTertiaryAlt #c8c8c8 Algunos textos, como, por ejemplo, en el panel de propiedades de elementos web, algunos iconos de elementos web, el fondo del selector de intervalo, algún fondo de botón al hacer clic, fondo de control de alternancia sí/no, borde de ajuste de color de fondo de sección.
neutralQuaternary #d0d0d0 Fondo de activación de acción de la barra de comandos cuando se selecciona un elemento de lista. Páginas del sistema: bordes
black #000000 Texto desplegable del panel de configuración de elementos web, controles de carrusel, texto de pestaña de contenido del sitio, texto del panel "Cambiar la apariencia".
white #ffffff Fondo del cuerpo principal, fondo de entrada de búsqueda, algún texto de botón, un texto de navegación central si está seleccionado el fondo de encabezado themePrimary, uno de los colores de fondo de sección disponibles. Páginas del sistema: fondo del cuerpo
neutralQuaternaryAlt #dadada Fondos de iconos de información y puntos suspensivos seleccionados en listas, los fondos de algunos elementos web en el modo de edición, fondo de elementos desplegables del panel de propiedades de elementos web, fondo de elementos de lista seleccionados.
accent* #ca5010 El cuarto color de la paleta del panel "Cambiar el aspecto".
whiteTranslucent40* "rgba(255,255,255,.4)" Cubre el resto de la página cuando se abre un cuadro de diálogo modal.
blackTranslucent40* "rgba(0,0,0,.4)" Cubre el resto de la página durante determinados estados de diálogo modal, es decir: cuando el cuadro de diálogo de búsqueda de elementos web está expandido.
backgroundOverlay* (vacío) Fondo principal de contenido del sitio, algunos bordes, es decir, entre la navegación central y del sitio.
primaryBackground* #ffffff Algunos fondos al editar la configuración de elementos web.

*No incluido en el generador de temas.

Las instancias de tokens de tema en la interfaz de usuario de SharePoint pueden variar en función de los colores de fondo seleccionados (es decir, el token de tema, white se usa para los vínculos de navegación de encabezado si se selecciona un fondo oscuro de encabezado, de lo contrario se usa neutralSecondary). Consulte Usar espacios semánticos para diseñar fondos de sección para obtener más información.

Nota:

Se han registrado más tokens en SharePoint Framework, aunque únicamente se puede asignar el subconjunto mencionado anteriormente en temas personalizados en sitios de SharePoint modernos (el motor de creación de temas genera automáticamente el resto). Para obtener la lista completa de tokens disponibles, vea el valor de la propiedad window.__themeState__.theme por medio de la consola de las herramientas de desarrollo de su explorador web.

Personalizar los colores del tema

Para personalizar los colores del tema, es necesario crear un tema personalizado y agregarlo a un inquilino de SharePoint para seleccionarlo en un centro o sitio de destino. Para obtener más información, vea Creación de temas de sitio de SharePoint.

Consulte también