Fluentui: office-ui-fabric-react not rendering SharePoint themes in SharePoint hosted app

[szulfiqar]

Bug Report

• __Package version(s)__: (1.0)
• __Browser and OS versions__: (Chrome and Windows)

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? ( No)

Requested priority: (High)

Products/sites affected: (if applicable)

Describe the issue:

I am using office-ui-fabric-react in SharePoint hosted app, i have installed react, react-dom and office-ui-fabric-react packages using NPM, when i deploy it to my developer site and run my app, it opens up with components having blue color while my SharePoint theme has green color in it. While when i create same functionality app in SharePoint framework here office-ui-fabric-react is rendering components colors according to the theme. Attached is the image where buttons, list and icons are in blue color, while they should be green.

.

Actual behavior:

office-ui-fabric-react not rendering SharePoint themes in SharePoint hosted app

Expected behavior:

office-ui-fabric-react should automatically apply my selected SharePoint theme coloring scheme to my components.

Here is my github repository:

https://github.com/szulfiqar/SharePointApp3_ReactOfficeUIFabric

[dzearing]

Looping in the right people internally; it seems the page is not getting theme information. This is less of a fabric-react issue and more of a sharepoint issue.

[pixelhen]

Was there any update to this? anyone?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[garrytrinder]

I'm seeing a similar issue, not with a SharePoint Hosted App but with an SPFX Web Part on a classic web part page that uses a Fabric UI React DefaultButton control that has the primary attribute set to true. The theme from the SharePoint classic page is not being applied but when the web part is displayed on a Modern Page, the theme is applied. I've also seen this behaviour with the Pivot control.

[garrytrinder]

I also see this message in the console, which could be related...

I'm taking a wild guess that theming.js is checking the __theme_state___.theme object which does not contain a key called "Light1" but contains many others.

Could this have been caused by the recent theming changes made in SharePoint Online?

[phkuo]

The theming in Classic and Modern SharePoint use different keys. If you set a theme via the Modern theming experience, the server will create a theme that will work in Classic.

However, theming must be invoked by global app/host code. Classic pages will trigger theming for Classic components, but not for Modern. There needs to be something on the page to invoke theming for the Fabric components, and as far as I know, that doesn't exist, unless the SPFX folks added it.

[aditima]

Hi, the core issue here seems to be that the documentMode is set IE10 in the SharePoint master page. Fabric does not support IE10 documentMode and the default documentMode for SP has recently been updated to Edge. If you are using a custom master page, please consider updating your documentMode to IE11 or Edge to work with Fabric.