Photo past times Ash Edmons on Unsplash
Modern sites are no longer using the one-time theming engine lead amongst .sptheme, .spcolor in addition to .spfont files. Instead you lot tin role the Theme Generator tool to teach your colors the means you lot desire them, in addition to this is what this transportation volition focus on, how you lot tin automatically laid the correct colors using PnP. The transportation has ii samples, 1 using PnP PowerShell in addition to 1 using a PnP Provisioning template.
Before nosotros firstly I’m going to exercise a novel tenant subject which volition live on the footing for automation. You tin read the official documentation on site theming on docs.microsoft.com.
Being about Easter I went amongst yellowish every bit the psyche color.
Using PnP PowerShell I added my subject using the next code:
$themepalette = @{ "themePrimary" = "#ffdd00"; "themeLighterAlt" = "#fffded"; "themeLighter" = "#fff9d1"; "themeLight" = "#fff090"; "themeTertiary" = "#ffe53f"; "themeSecondary" = "#ffde0b"; "themeDarkAlt" = "#e6c700"; "themeDark" = "#a38d00"; "themeDarker" = "#8c7a00"; "neutralLighterAlt" = "#f8f8f8"; "neutralLighter" = "#f4f4f4"; "neutralLight" = "#eaeaea"; "neutralQuaternaryAlt" = "#dadada"; "neutralQuaternary" = "#d0d0d0"; "neutralTertiaryAlt" = "#c8c8c8"; "neutralTertiary" = "#595959"; "neutralSecondary" = "#373737"; "neutralPrimaryAlt" = "#2f2f2f"; "neutralPrimary" = "#000000"; "neutralDark" = "#151515"; "black" = "#0b0b0b"; "white" = "#ffffff"; "primaryBackground" = "#ffffff"; "primaryText" = "#000000"; "bodyBackground" = "#ffffff"; "bodyText" = "#000000"; "disabledBackground" = "#f4f4f4"; "disabledText" = "#c8c8c8"; } Add-PnPTenantTheme -Identity "Easter Bunny" -Palette $themepalette -IsInverted $false
In the UI of a modern site, my Easter Bunny similar a shot shows upward inward the listing of available themes.
But we’re all nigh automation, in addition to thence no UI this fourth dimension around.
PnP PowerShell 1
Connect to your site in addition to execute the next to laid your custom theme. Note that this does non run amongst the out-of-the-box subject names.
Connect-PnPOnline -Url https://tenant-admin.sharepoint.com Set-PnPWebTheme -Theme "Easter Bunny" –WebUrl https://tenant.sharepoint.com/sites/MyModernSite
At the fourth dimension of writing the WebUrl parameter is non released, only volition live on included inward the side past times side PnP PowerShell release.
PnP PowerShell 2
There are no commandlets or API’s at the writing of this transportation to lead apply a subject based on the name, in addition to thence nosotros ask to become through site scripts in addition to site designs to wire it all up. First exercise a site script which reference the Easter Bunny theme.
As we’re nigh automation, using either a SharePoint App or ADAL app for SharePoint connective nosotros ask to connect to the admin site earlier applying the site pattern to the site (at the fourth dimension of writing in that place is a põrnikas inward the free of PnP Posh for this, flake this has been fixed). Once the sitescript/sitedesign is added, you lot tin run the Invoke-PnPSiteDesign ascendancy on the sites needing your theme, every bit long every bit you lot tape the id of the design.
Connect-PnPOnline -Url https://tenant-admin.sharepoint.com $site_script = @' { "$schema": "schema.json", "actions": [{ "verb": "applyTheme", "themeName": "Easter Bunny" } ], "bindata": {}, "version": 1 } '@ $sitescript = Add-PnPSiteScript -Title "Easter Bunny" -Content $site_script $design = Add-PnPSiteDesign -Title "Easter Bunny" -SiteScriptIds $sitescript.Id -WebTemplate TeamSite Invoke-PnPSiteDesign -Identity $design -WebUrl https://tenant.sharepoint.com/sites/MyModernSite
And nosotros accept a non in addition to thence pretty Easter site :)
PnP Provisioning Template
At the 2nd the PnP provisioning schema does non back upward settings for modern site designs, only don’t worry. When applying the Easter Bunny subject nosotros genuinely teach a .spcolor file generated for us which tin live on used amongst the PnP provisioning schema.
Navigate to https://tenant.sharepoint.com/sites/MyModernSite/_catalogs/theme/Forms/AllItems.aspx in addition to click the Themed folder you lot volition run across a folder amongst a random name.
Enter this folder in addition to re-create out the theme.spcolor file in addition to rename to easterbunny.spcolor.
Create a pnp template similar to the template below in addition to you lot should live on proficient to go.
template.xml
<?xml version="1.0"?> <pnp:Provisioning xmlns:pnp="http://schemas.dev.office.com/PnP/2018/01/ProvisioningSchema"> <pnp:Preferences Generator="OfficeDevPnP.Core, Version=2.12.1702.0, Culture=neutral, PublicKeyToken=3751622786b357c2" /> <pnp:Templates ID="CONTAINER-TEMPLATE-EASTER-BUNNY"> <pnp:ProvisioningTemplate ID="TEMPLATE-INNOVATION-EASTER-BUNNY" Version="1" BaseSiteTemplate="GROUP#0"> <pnp:ComposedLook Name="Easter Bunny" ColorFile="{sitecollection}/_catalogs/Theme/15/easterbunny.spcolor" BackgroundFile="" FontFile="" Version="0" /> <pnp:Files> <pnp:File Folder="_catalogs/Theme/15" Overwrite="true" Src="easterbunny.spcolor" /> </pnp:Files> </pnp:ProvisioningTemplate> </pnp:Templates> </pnp:Provisioning>
Remember, if you lot apply this to a modern site, shout upward to allow scripting on the site. Using PnP PowerShell you lot tin exercise this with:
Set-PnPTenantSite -Url https://tenant.sharepoint.com/sites/MyModernSite -NoScriptSite:$false
Now you lot tin apply the template using your favorite method, that live on PnP PowerShell or using CSOM.
Summary
Using the novel Theme Generator allows you lot to easily generate novel color themes for your modern sites, in addition to making them available to your users. By tapping into how the themes are genuinely applied generating an .spcolor file you lot tin yet role this to apply the colors via PnP provisioning templates until they back upward modern theming.
By using PowerShell you lot tin apply themes lead via the usage of site scripts in addition to site designs.
Thanks for reading : Two Approaches To Applying A Modern Subject Using Pnp