SPFx, Fabric, and Modern Themes

[Tracy Sterling]

According to the last few comments of this techcommunity post, modern themes are currently only available on the 2 modern group-connected team and communication site templates.  Does that mean absorbing contextual themes for SharePoint customization's such as SPFx web parts and Fabric components (like described below), would only work when they are housed in those specific site templates?

• https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-theme-colors-in-your-customizations
• https://developer.microsoft.com/en-us/fabric#/styles/colors

[#2]

The modern themes are designed to work with the modern pages and are not relevant to classic pages. But an SPFx web part can be rendered in a 'classic' page and of course you can create a 'modern' appearance using CSS tools like Office UI Fabric. By default your SPFx web part will have a modern look and rendering it in a classic page won't change this.

Having said that, there is the possibility that there will be a conflict between the very complex CSS in classic SharePoint and the Office UI Fabric, and I have heard of people finding their SPFx web parts didn't look right when rendered in a classic page as opposed to a modern page or in the workbench. You might need to do a bit of F10 browser developer tool detective work to fix these issues in practice.

[#3]

Thank you for the response @Bill_Ayers1.  Maybe I'm confused about what is possible and where.  When you say 'modern themes are designed to work with the modern pages' - how would one set a modern page to to use a modern theme?  If I create a modern page outside one of the two modern site templates, I cannot assign it a modern theme.  See the first image below, and note that I am missing the 'Change the Look' option from the settings menu.  According to @Sean Squires' article, that's the only way to set a SharePoint site to use a modern theme.  

Missing 'Change the Look' option

The following image is a screenshot from a new Group-Connected team (modern) site, so it does have the 'Change the Look' option available. 

As I understand it, if I cannot set the site to use a modern theme - then I cannot take advantage of the contextual theme 'inheritance' as described in the links of my original post. 

Thanks!

-Tracy