Añadir estilos en un WebPart SPFx para los temas de Teams (Default, Dark, High Contrast)

Primero debemos añadir un bloque de código a ejecutar en el inicio de nuestro componente que se encargará de añadir un parametro que nos permitirá identificar en que tema estamos.

Utilizaremos el contexto actual (puede ser this.context, this.props.context, props.context… dependiendo de cómo desarrolleis el componente). En mi caso trabajamos con React Function Components, y pasamos el contexto del WebPart al componente en las props, por lo que quedaría así:

React.useEffect(() => {
     if (props.context.sdks.microsoftTeams) { 
          const context = props.context.sdks.microsoftTeams!.context;
          applyTheme(context.theme || 'default');
props.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(applyTheme);
     }
}, []);

Y la función “applyTheme”:

const applyTheme = (theme: string): void => {
     props.context.domElement.setAttribute('data-theme', theme);
     document.body.setAttribute('data-theme', theme);
}

Quedará añadido en el tag body y podremos seleccionarlo para especificar nuestros estilos dependiendo del tema que tengamos aplicado en Teams:

.detailsViewPanel {
     background-color: "[theme: white, default: #ffffff]";
}

[data-theme='default'] {
     .detailsViewPanel {
          background-color: "[theme: neutralLight, default: #eaeaea]";
     }
}

[data-theme='dark'] {
     .detailsViewPanel {
          background-color: "[theme: neutralPrimary, default: #333333]";
     }
}

[data-theme='contrast'] {
     .detailsViewPanel {
          background-color: "[theme: black, default: #000000]";
     }
}

En este caso por defecto el fondo sera blanco y aparecera en SharePoint. Si añadimos el WebPart en Teams utilizará el que corresponda al tema en Teams.

Más info:

• https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/design/components/color
• https://docs.microsoft.com/en-us/sharepoint/dev/design/themes-colors