3/28/2020

Support Microsoft Teams Themes in SharePoint Framework Solutions

If you are a SharePoint Framework developer, you're most likely aware that SPFx allows you to refer to the theme colors of the context site. As a result, if your web part is placed on a site that uses a red theme, it uses the red palette as well, and if it's placed on a site that uses the blue theme, it automatically adjusts itself to use the blue palette. All of this is done automatically without any changes to the web part code in between.
But what if you expose your web part to Microsoft Teams? And selected theme in Teams is Dark or Contrast?
Unfortunately, SharePoint Framework doesn't handle MS Teams themes for you, you should do that by yourself.
And it's not a big deal if you have few controls in the web part.
But what if your project contains tens of different components?
In this post I want to share the approach I used to support MS Teams themes in the web part that has about 50 different components. Note: I use React for production SPFx development, so all the thoughts below may not be applicable to other frameworks, especially if the components are not so encapsulated as in React.