SharePoint Online App part cannot inherit the site theme

[jerrylu1671]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

We develop a custom SharePoint Online App part. Following the guide https://docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/give-your-provider-hosted-add-in-the-sharepoint-look-and-feel,
and expect the app part can use the same theme color of the site.

Observed Behavior

The app part worked fine before. But recently since a few days ago, the app part does not inherit the site theme color, but uses the default blue color.

Steps to Reproduce

Customized a site to a non-default theme with a non-default color. Add a custom app with the inherited theme. You can see the custom app cannot inherit the site theme color, but the default blue color.

Submission Guidelines

Thanks for your contribution! Sharing is caring.

[jerrylu1671]

I have check the code, and it seemed that the theme classes were not lost. I tried at my test tenant’s site collection with my APP and directed to the style link : https://aveulm002.sharepoint.com/sites/chenSC5/_layouts/15/defaultcss.ashx 

Below is an example, the class ‘ms-ContentAccent1-bgColor’ is used as the background-color of the app. Then I opened the style link, and find out the class ‘ms-ContentAccent1-bgColor’, the real color is ‘#0072C6’ which is showed as the default theme blue background color.
It seemed that the theme class in style link is the problem.

[mhardy]

Having the exact same issue. Tried a number of different things but no matter what the default blue is now the only thing returned.

[napkatz]

Same issue. here :( Came up during a sales demo where we were trying to sell SharePoint Online along with our add-ins. We already needed to work around a bug in the help icon handling for the Chrome component earlier in the year. Now the colors aren't coming in right, but instead sticking to Default blue.

Help!

[napkatz]

I've come up with a workaround to this issue for anyone interested. We've created a server-side class called ThemeHelper which can correctly download the SharePoint Online themes on the server-side. We can then dynamically add them to CSS files that override the incorrect colors currently provided by the ChromeControl.

Here's a link to our blog about the workaround: http://www.efficiencynext.com/workaround-for-sharepoint-add-in-chromecontrol-issue/. The ThemeHelper class can also be downloaded at this location.

Likewise, a link to our video on YouTube shwoing the workaround in action: https://youtu.be/KP0eTdyjj_w

I hope this helps! I know SPFx gets a lot of attention, albeit if you are looking to integrate external web applications into SharePoint Online, the Add-In model is a very important tool!

[github-actions]

Thank you for taking the time to file an issue. We periodically archive older or inactive issues as part of our issue management process, which automatically closes them once they are archived.

If you’d like to understand more about why and how we handle archived (closed) issues, please see Our approach to closed issues.

We appreciate your contribution and if this is still an active issue with the latest SPFx versions, please do resubmit the details. We needed to perform a cleanup, so that we can start with a clean table with a new process. We apologize for the inconvenience this might cause.