Workaround for SharePoint Add-In ChromeControl Theming Issue

Posted by on Aug 14, 2018 in From the Cloud, From the Lab, From the Mind | Comments Off on Workaround for SharePoint Add-In ChromeControl Theming Issue

In 2012, Microsoft released the Add-In model to allow for rich custom applications built on-top of SharePoint 2013 and SharePoint Online. A key part of this new model was for external web applications to be able to inherit much of SharePoint’s look-and-feel via a JavaScript toolset call the ChromeControl.

Unfortunately, this year (2018), the ChromeControl’s functionality became broken inside of SharePoint Online. While SharePoint administrators can elect to change the theming of their SharePoint sites, the ChromeControl started to only be able to bring in the default Blue theme. This is a tracked bug in GitHub:

Internal traction within Microsoft for fixing this bug in SharePoint Online has been challenging from what I understand. Yet deployed Production Add-Ins do depend on the ChromeControl to function. At EfficiencyNext, we’ve developed a workaround, involving a server-side class we’ve built called ThemeHelper. On the server-side, it downloads the theme colors and background image URL for a SharePoint site. Then, using a server-side generated CSS file, critical tag and class colors which are currently incorrectly specified by the ChromeControl’s CSS are overwritten by our CSS file. Here’s a video of this fix in action!

We hope Microsoft does get around to fixing this issue, as not all developers have the luxury of having both server-side code for their Add-Ins and the permission allowances for their Add-Ins to read the SharePoint site’s theme information. However, if your Add-In is fairly trusted in SharePoint environments, and you need coloring to be imported right, this is a way to go!

A link to our ThemeHelper class.

And an example of an ASP.NET generated CSS file that uses it with SharePoint’s style classes.

Need help implementing this fix or with SharePoint in general? Contact us! We’d love to see how we can help.