Added 'EnhancedThemeProvider' control

[fabiofranzini]

Q	A
Bug fix?	[ ]
New feature?	[X]
New sample?	[ ]
Related issues?	fixes #1202

What's in this Pull Request?

I added the new 'EnhancedThemeProvider' Control used to improve support for themes and fonts when creating Tab or Personal App in SPFx for Teams or creating Isolated Web Parts.

The reasons behind this control are many and concern the use of Fluent UI controls currently officially supported by SPFx, that is:

• Problems with Teams theme support, when hosting a Web Part like Tab or Personal App and specifically the lack of support by this version of Fluent UI React of the high contrast theme.
• Lack of basic style, such as fonts, for basic HTML elements when creating Web Parts hosted in Teams as Tabs or personal App.
• Lack of basic style, such as fonts, for basic HTML elements when creating Web Parts in "isDomainIsolated" mode, aka the Isolated Web Parts.

Therefore, the control is to be considered as a sort of wrapper for all react and non-react controls that you want to add to the WebPart.

The control extends the functionality of the Fluent UI ThemeProvider control (currently in version 7) by adding some logic thanks to the information contained in the 'context' property, that is:

• If the Web Part is hosted inside SharePoint, the theme passed through the 'Theme' property will be used or the default one of the current site will be taken.
• If the web part is hosted within Teams, the "Theme" property will be ignored and using the "Context" property checks which theme is currently applied and adds a handler to notify when the theme is changed. This allows you to manage the change of theme in Teams in real-time, without having to reload the Tab or the Personal App.

As for Teams, given the inconsistency of the theme system of Fluent UI NorthStar (used in Teams) and Fluent UI React (used by SPFx), the themes are "emulated".

The control contains the refining of Teams' Default, Dark and Hight Contrast themes.

This is just an example on Teams with Hight Contrast theme applied:

[fabiofranzini]

Hi @AJIXuMuK and @joelfmrodrigues with the last commit I finalized the default, dark and high contrast theme for Teams.

As mentioned in the Twitter thread with @AJIXuMuK, I created a repo to individually test the various Fluent controls (not all but most) with the default themes and the ones I created instead.

Specifically, you can see the themes applied using this branch: https://github.com/fabiofranzini/spfx-test-fluent-ui-theme/tree/custom-teams-themes

For this component, as you can see, I have placed the themes in the "common" folder, to share these themes with other components as well (for example the AdaptiveCardHost control).

Thanks in advance 🙂

[joelfmrodrigues]

@fabiofranzini Many thanks for another great contribution!
I'm just reviewing this now and while testing the solution that you linked above I got one error as it's missing the package @fluentui/react-theme-provider from package.json. Was going to submit a PR, but a bit busy so letting you know here instead as it's a quick fix for you

[fabiofranzini]

@fabiofranzini Many thanks for another great contribution! I'm just reviewing this now and while testing the solution that you linked above I got one error as it's missing the package @fluentui/react-theme-provider from package.json. Was going to submit a PR, but a bit busy so letting you know here instead as it's a quick fix for you

Hi @joelfmrodrigues I just fixed the package.json! Thanks 🙂

[joelfmrodrigues]

@fabiofranzini Great stuff! I just added 2 minor comments as I think you are using the same function in different locations

[joelfmrodrigues]

@fabiofranzini sorry just another note. As you are adding a new control, can you also update the documentation links so it get's displayed on the site?

No problem if not, I can always do it after. Just thought you were probably not aware of this

[fabiofranzini]

@fabiofranzini sorry just another note. As you are adding a new control, can you also update the documentation links so it get's displayed on the site? No problem if not, I can always do it after. Just thought you were probably not aware of this

Great, sorry for that but I've completely missed this step! Thanks again

[joelfmrodrigues]

@fabiofranzini Merged! 👏👏👏

[fabiofranzini]

@fabiofranzini Merged! 👏👏👏

Great, thanks for your feedback! ♥️