How to Add a Theme for SharePoint & Apply via PnP

Title

URL Name

How-to-Add-a-Theme-for-SharePoint-Apply-via-PnP

Question

Can you apply a theme to a SharePoint site to adjust the colours when you provision with ProvisionPoint app?

Answer

A custom theme can be applied to your SharePoint environment using a PnP template that is linked to your Service Definition.

This can be achieved using a Custom Theme or Brand Centre for Modern workspaces

Custom Theme

Applying a theme via PnP is dependent on a custom theme already being created and added to SharePoint via PowerShell.

For more information read Microsoft's articles:

To create a custom theme: https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/index.html

To deploy the the theme: https://learn.microsoft.com/en-us/sharepoint/dev/general-development/how-to-deploy-a-custom-theme-in-sharepoint

PowerShell to add theme: https://learn.microsoft.com/en-us/powershell/module/sharepoint-online/add-spotheme?view=sharepoint-ps

Brand Centre

For Modern Sites a Brand Centre is a centralized area that will define the branding applied to the Site.

To read more from Microsoft go to: SharePoint Brand Center - SharePoint in Microsoft 365 | Microsoft Learn

Once you have your Brands configured you can use ProvisionPoint and PnP to apply the brand to the Sites we create.

You can access your brand centre using the following url: https://YOURDOMAIN.sharepoint.com/sites/brandcentre

Your SharePoint themes via: https://YOURDOMAIN.sharepoint.com/sites/brandcentre/_layouts/15/brandcenter.aspx/sharepoint

PnP Template

Once the Theme is visible in SharePoint Online it can be applied to any Site created through ProvisionPoint.

Create a PnP template or amend an existing template. An example is available in PnP Template Examples
Add pnp:properties to the PnP template if it does not exist.

Add pnp:Property within the properties section with the following values

Key="Theme"

Add the custom theme identity to the "Value"="identity/name of the theme"

<pnp:Provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2019/09/ProvisioningSchema">;
  <pnp:Preferences Generator="PnP.Framework, Version=1.17.30.0, Culture=neutral, PublicKeyToken=0d501f89f11b748c" />
  <pnp:Templates ID="CONTAINER-TEMPLATE-28163778C57946ED93322A1515C87CDF">
    <pnp:ProvisioningTemplate ID="TEMPLATE-28163778C57946ED93322A1515C87CDF" Version="1" BaseSiteTemplate="GROUP#0" Scope="RootSite">
      <pnp:WebSettings RequestAccessEmail="" NoCrawl="false" WelcomePage="SitePages/Home.aspx" SiteLogo="" AlternateCSS="" MasterPageUrl="{masterpagecatalog}/seattle.master" CustomMasterPageUrl="{masterpagecatalog}/seattle.master" CommentsOnSitePagesDisabled="false" QuickLaunchEnabled="false" MembersCanShare="true" SearchScope="DefaultScope" />
      <pnp:Properties>
        <pnp:Property Key="Theme" Value="BC-PP" />
      </pnp:Properties>
    </pnp:ProvisioningTemplate>
  </pnp:Templates>
</pnp:Provisioning>

Continue to edit your PnP with any other settings you need
Upload and link the PnP template to the Service Definition(s),
On the next request the PnP will be applied,

Check the Job Queue for any errors, if the PnP fails it can be amended, re-uploaded and the job replayed.