Sp-dev-docs: Theme provider does not work if web part is hosted as a single page app

[nbelyh]

Category

• [x] Bug

Describe the bug

This bug was created as discussed in these issues: #5075 and #6201

In short: Theme provider functions do not seem to work when page is hosted as "single page web part" app.

The tutorial for using themes in the app: on https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds does not work when the web part is hosted as "single page app".

If you follow the above tutorial and host a web part as a single-page-app, the theme provider returns undefined and the theme events are not fired.

I have created a sample project and put steps to reproduce the issue with theme below.

It has these settings in web part config:

  "supportedHosts": ["SharePointWebPart", "SharePointFullPage"],
  "supportsFullBleed": true,
  "supportsThemeVariants": true,

The example can be found here (it is a stock HelloWorld web part generated with yeoman with these specified settings)
https://github.com/nbelyh/spfx-theme-issue

The important changes from the stock "HelloWorld" web part are highlighted:

https://github.com/nbelyh/spfx-theme-issue/blob/e86b49b9874188daa590843c7b3042c423a99032/src/webparts/helloWorld/HelloWorldWebPart.manifest.json#L16-L18

https://github.com/nbelyh/spfx-theme-issue/blob/e86b49b9874188daa590843c7b3042c423a99032/src/webparts/helloWorld/HelloWorldWebPart.ts#L27-L53

To reproduce:

1. download the project and build:

npm install
gulp bundle --ship
gulp package-solution --ship
This should produce .spfx package.

1. create (modern) SharePoint team site (as single-page apps can't be tested with workbench)

2. Upload the built .spfx solution to the site app catalog, and deploy for this site.

3. Add the .spfx app for the site (open home page, click New > Apps, then select "from your organization" then app
   uploaded (spfx-issue-client-side-solution)

4. Go to site home page, click New > Page > App and select the upload app ("HelloWorld". This should produce a single-app page.

5. Save the page.

6. Open the Dev Tools console and check the messages. It should report what _tryGetTheme() returns. The result is expected to be not undefined. Now the log produces:
   ```
   _themeProvider.tryGetTheme returned undefined
   ````

7. Try changing the theme and observe if there is message in the console about the event being called (now there are no log entries for the event being called). There should be.

Please note that if you use the HelloWorld in a regular page, all events and tryGetTheme work as expected.

Environment details (development & target environment)

• Your Developer Environment: Windows 10
• Target Environment: SharePoint Online
• Framework: Node.js v10
• Browser(s): Chrome v79
• Tooling: VS Code | SPFx v1.11.0

[msft-github-bot]

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

[KevinTCoughlin]

We are working on a fix. It appears that the single page app host does not instantiate ThemeProvider with the global theme.