Placeholder Control not working in Teams theme

[DJoshi23]

Hi,

I have created SPFx webpart with Placeholder Control and added webpart in Teams application as a Teams Tab.

Issue Description : If I change the Teams Theme to High contrast then Placeholder Control not looking properly. Please find the below image for your reference

and same type of theme issue i am facing in other control as well .

Version :

SPFX version : 1.12.1
"@pnp/spfx-controls-react": "3.2.1"
"@pnp/spfx-property-controls": "^3.2.0",

Thank you in advance

[ghost]

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

[github-actions]

Thank you for submitting your first issue to this project.

[joelfmrodrigues]

Hi @DJoshi23, many thanks for reporting this issue. Would you be interested in submitting a PR?
If so, please keep in mind that the solution has been upgraded to SPFx 1.14.0, which introduces some changes to themes
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/release-1.14#web-part-lifecycle-method-for-theme-changes

[fabiofranzini]

Hi @DJoshi23 and @joelfmrodrigues, I tried by using the latest public version of the library (3.7.2) and for me the result is this one (using a SPFx 1.14.0 solution with a standard Web Part deployed as a Teams Tab):

So, my advice is to update both this library and the whole SPFx project to the latest version.

However, the classic problem remains, namely the fact that a solution deployed in this way loses some styles such as the font and the real Teams theme applied (a problem that has been well known for a long time).

@joelfmrodrigues what do you think? Is it time for a check to manage the Fluent theme if you are within Teams? Some kind of
ThemeProvider that applies the Teams theme automatically if you are in Teams and systems finally the question of fonts?
I had already scheduled this type of control since the problem is common.

In this case I can work on a check like that 🙂

[joelfmrodrigues]

@fabiofranzini are you referring to a control/helper that would be responsible for the theme on it's own and could be used with any other control to address the issue?

[fabiofranzini]

@fabiofranzini are you referring to a control/helper that would be responsible for the theme on it's own and could be used with any other control to address the issue?

Exactly! The same problem exists for the isolated web parts, it could be solved in this way, by wrapping the controls to be used as children of this "new control". This solves the problem universally, even for all fluent controls.

[joelfmrodrigues]

Yup, that would be amazing to have 🙂 it's definitely one of the pain points with SPFx in my opinion as it's always complex to handle and test across all scenarios.
I will assign this issue to you 🙂 Many thanks!

[fabiofranzini]

Ok, there are two things.
One is the new control we mentioned, I've already done some tests.

The problem described by @DJoshi23 remains, even if I pass him a correct theme it seems that the PlaceHolder control does not work correctly as he has written, so I need to modify it.

I will work on it and update you.

[fabiofranzini]

First implementation done:

As you can see, the theme colors are applied based on the selected Teams theme, the same thing for fonts too.
The problem with Placeholder control (and many others) is that they don't have direct Themes support.

@joelfmrodrigues do you prefer that we leave this issue for the Placeholder control and create a new one for the new control I called "EnhancedThemeProvider"?

[fabiofranzini]

Ok, I checked the code of the Placeholder control and I realized that sass was used for the style part.
This ensures that the style change is not applied until the page is reloaded, and in fact the behavior is just that. What is best done is:

• add the 'theme' property to the control`s properties
• rewrite the sass part using @fluentui/merge-styles
• use the theme property correcly

@joelfmrodrigues If you tell me it's ok, I can start tweaking the control

[fabiofranzini]

Here is an early version

[joelfmrodrigues]

@fabiofranzini sorry for the late reply...
It's looking great! 👏

[fabiofranzini]

Ok, I've finished updating the code to support the themes and theme variations of the sections in the Placeholder control and I'm ready to do the PR.

Now, the problem raised by this issue remains, that is, if you set the Teams theme as High Contrast, the result remains the one shown by @DJoshi23.

This is because using SPFx in Teams, Teams using a SharePoint page under the hood that has a theme applied that mimics that of Teams but isn't.

The reason is simple, Teams uses a UI framework which is Fluent React NorthStar instead SPFx uses Fluent UI React.
Two different frameworks that have a completely different theme system.
Now, the theme that Microsoft implemented in SharePoint to mimic Teams Hight Contrast is not done well, which is why it looks so bad when use it.

So how to solve the problem of this issue:

1. give support to the issues to the Placeholder component
2. create a component that mimics the Teams themes as much as possible and pass them on to the child components

The first point is made while for the second I am working on it.
If you agree, do this:

1. create an issue and then send the PR for the Placeholder check
2. create an issue and then send the PR for the control that I called EnhancedThemeProvider which gives support to Teams themes in Fluent UI.
3. close this issue by explaining how to combine the two controls to solve the problem.

What do you thinks @joelfmrodrigues?

[joelfmrodrigues]

@DJoshi23 this has now been fixed by @fabiofranzini and the PR was merged to the dev branch. You can get the updates if you install the beta version and if you do give it a try, please let us know if you find any issues. It looks great so far 👏

[fabiofranzini]

@joelfmrodrigues @DJoshi23 the problem is not completely resolved because the Hight Contrast theme in SPFx is not equal to the Hight Contrast theme in Teams...

I'm working on another control (something like EnhancedThemeProvider as a component that mimics the Teams themes as much as possible and pass them on to the child components) and will be available soon. 😀

[joelfmrodrigues]

Ups, sorry for my confusion and thanks for clarifying @fabiofranzini

[fabiofranzini]

Hi all, just an update: #1202 (comment)

[michaelmaillot]

Hi @DJoshi23,

Following amazing work done by @fabiofranzini, did you had the chance to retry with the EnhancedThemeProvider which is available since 3.9.0?

[ghost]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within next 7 days of this comment. Thank you for your contributions to SharePoint Developer activities.

[ghost]

Closing issue due no response from original author. If this issue is still occurring, please open a new issue with additional details. Notice that if you have included another related issue as additional comment on this, please open that also as separate issue, so that we can track it independently.