New control [EnhancedThemeProvider]

[fabiofranzini]

Category

[X] Enhancement
[ ] Bug
[ ] Question

Version

Please specify what version of the library you are using: [3.7.2]

Expected / Desired Behavior / Question

Improved support for themes and fonts when creating Tab or Personal App in SPFx for Teams or creating Isolated Web Parts

Observed Behavior

As specified by issue #1130, the use of Fluent UI React in the version currently used with SPFx 1.14 and earlier, brings with it problems with Teams, and specifically with the High Contrast Theme.

Specifically, if you create a Web Part to be used as a Teams Tab, or as a Personal App, there are two problems:

• Themes provided by the SharePoint page that do not reflect the real Microsoft Teams themes (especially the High Contrast one)
• Lack of default font (Segoe family) when not using Fluent UI React controls.

These two issues frustrate both developers who must write code to implement default font support every time, and users who want to use Web Parts with a dark or high-contrast theme.

I also experienced the problem of fonts when making isolated Web Parts.

Steps to Reproduce

Same scenario discussed in issue #1130

Solution

I'm working on creating a control that handles these things:

• Automatic add of correct fonts
• Better support for Teams themes by recreating them in Fluent UI React (Teams supports Fluent UI NorthStar themes)
• Automatisms for automatic check of the Teams theme and use of the corresponding theme.

I will be creating the first PR for this control shortly,
Thanks!

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[fabiofranzini]

Hi all,
just to inform that I'm finished the EnhancedThemeProvider control (PR will be available ASAP).

I reimplemented the Hight Contrast Theme for Teams (not for all controls, it's a huge work to do that) and the result is this:

[joelfmrodrigues]

@fabiofranzini 👏👏👏👏👏