I guess I showed in some of my recent blog posts that it is possible to test themed web parts during development. This theme testing is currently not possible in the local workbench, but it is possible on the one available on Office 365. Let me show in this post how I did and do and in which problem might occur to your web parts too.

Launch the local workbench

First, launch your SPFx project like you do when you developer your web part. The easiest way is to execute gulp serve on the command line an in case you want to avoid that your browser opens the local workbench start the project with gulp serve --nobrowser. The local instance won’t be used anyway because it doesn’t support theming overall. Instead, we use the workbench available on Office 365.

I opened one of my communication site playgrounds two times on different tabs. One browser tab I use to switch the themes, while the other is there to run the Office 365 workbench. To open it all required for that is to switch the pages manually. When the communication site is available at the following link,

https://mytennant.sharepoint.com/sites/News/SitePages/Home.aspx

change the address as to look like this,

https://mytennant.sharepoint.com/sites/News/_layouts/15/workbench.aspx

So basically append /_layouts/15/workbench.aspx to the URL of the web you like to test. The next step is to add the web part you are currently working on to the page.

Changing themes and test

With two tabs now open, one with the workbench the other with the regular site it is easy to switch between both views. The first thing is to navigate to the communication site. The gear icon on top and allows you to “Change the look”.

For example, let’s select the orange theme, and instantly the communication page will be repainted to represent the orange one.

It is essential to apply it to the site because otherwise, you won’t see the changes in the workbench. Now over to the workbench tab and refresh the page there and see the result.

The new colours not only get applied to the web part even the colours in the toolbar changes too. Repeat these steps for any of the theme provided by Microsoft or change it to a modified custom theme. This way the workbench will get you a preview how the web part looks with different colour pallets applied.

For example the red colour theme:

Or the purple one:

I guess you got the idea and from my point of view, this is a usefull feature not only for testing but even for debugging the style sheets of your development.

But there is something – A bug or maybe feature?

Honestly, I’m not sure about this. In eighty percent this theme testing works well. In twenty percent two colour themes don’t behave as expected. Those themes are the “Dark Yellow” which uses a solid black background and yellow as the accent colour.

When test this theme and move over to the workbench, everything will be coloured correctly except the background. It remains white while the rest is coloured correctly even the toolbar.

The other theme that has some difficulties is named “Dark Blue” showing the same behaviour. It looks good on the communication site but

again the background doesn’t get applied to the workbench.

While I was testing the workbench, I recognised this problem, so I issued a bug report on sp-dev-docs. The response I got was that this is something that actually shouldn’t work at all and it is not a bug it is a new “feature”.

Anyway either it is a bug or the use of an unsupported feature or a new feature. I documented it on GitHub and besides, I raised a user voice. If you think this theme testing would be beneficial for your development too, then please support this idea. From my perspective, this theme testing will be a great addon, to make sure that your development works on different sites too.

What is your take on this? Let me know or support the  user voice directly.