Modern Team Sites have reached general availability! Here’s how to apply theming to your new modern sites

Welcome to the future!  Since the first time we saw modern team sites on May 4th 2016 we have all lusted after them.  Slick, polished, easy to use pages that you can edit on any device that will look great on any device.  I was speaking last night at the CT SharePoint User Group and took a picture on my phone which I posted as a part of a new news article from the SharePoint app on my phone.  Really exciting stuff!

 

Vesa Juvonen put together a fantastic introduction into the current state of customizations for modern team sites.  In all honesty they really are a very much out of the box, no customization sort of experience today.  Once the SharePoint Framework ships, we’ll be able to add some modern client-side webparts but other than that, things are pretty much locked down.  This includes no sharepoint designer support, no uploading .aspx pages, no script injection, nothing.

 

The one customization you can do is to apply a theme to the site.  For folks who have done branding work in SharePoint 2013 I’m referring to a composed look.  The fun part, is that the user interfaces for managing this are entirely removed so its time to break out some PowerShell with the patterns and practices PowerShell library for SharePoint online.  There’s an example on the site of how to apply branding but I faced some challenges with that so tweaked / adapted it a bit and wanted to share it here:

 

Building your theme

Since SharePoint 2013, you can (and should) use a .spcolor file to define the palette for your SharePoint site, and a .spfont file to define the fonts that are used.  There two items historically come together as part of a composed look which you can access via site settings.

 

Personal advice, don’t ever both hacking through the giant ugly xml file that is the .spcolor file on your own, Microsoft has a great free tool called the SharePoint Color Palette Tool.  Use it!  It’s great an gives you a preview of how things would look when applying the styles on a classic team site.

spcolortool

 

Apply the theme

If you have never used the SharePoint PNP PowerShell libraries you’ll need to get them.  My preference is to run PowerShell ISE as an admin and install it from the PowerShell Gallery using this:

Install-Module -Name SharePointPnPPowerShellOnline

 

After installing the module this is the basic code you’ll want to run

# Connect to a previously created Modern Site
$cred = Get-Credential
Connect-PnPOnline
https://mytenant.sharepoint.com/sites/MyTeamSite -Credentials $cred

#get the current web used in generating the url to the files
$web = Get-PnPWeb

 

#add a Theme folder in site assets to keep things neat
Add-PnPFolder -Name Theme -Folder SiteAssets

# First, upload theme assets
Add-PnPFile -Path C:\theme\ModernTeamSite.spcolor -Folder SiteAssets/Theme
#Add-PnPFile -Path C:\theme\Arial.spfont -Folder SiteAssets/Theme
#Add-PnPFile -Path C:\theme\bgimage.jpg -Folder SiteAssets/Theme

 

# Second, apply theme assets to site
$palette = $web.ServerRelativeUrl + “/SiteAssets/Theme/Shire.spcolor”

 

#sp font doesn’t seem to be supported
$font = [NullString]::Value

 

#if you want a background image, map it here
$background = [NullString]::Value

# We use oob CSOM operation for this
$web.ApplyTheme($palette, $font, $background, $true)

$web.Update()

# Set timeout as high as possible and execute
$web.Context.RequestTimeout = [System.Threading.Timeout]::Infinite
Execute-PnPQuery