Create a custom SharePoint theme and publish it tenant-wide in under 5 minutes

Custom theme applied to SharePoint Online communication site.

You’ve been able to choose from several out-of-the-box “modern” site themes in SharePoint Online for a while now.  But recently, Microsoft released the ability to create custom themes in SharePoint online and publish them to your tenant as “Company themes” that users can select in the Change the look menu.

This blog will show you how to create a theme, publish it to your tenant and apply it to sites in under 5 minutes.

snip_20180405080817

Create a theme with the Office UI Fabric Theme Generator

Head on over to the Office Fabric UI site and use the Theme Generator tool to create a custom theme based on your organization’s primary color.  You’ll need to know the hex or RGB value of the primary color.

PSC’s primary color is hex #002d5a, so I just paste it in the Primary theme color “Hex” box and the Theme Generator creates a palette for me.

snip_20180405081721.png

If you want to get fancy, you can change the secondary colors, too by clicking each of the colored tiles beneath the Primary theme color box:

snip_20180405081857.png

You can also review the Fabric palette section beneath the Output section and click any of the color swatches to change them.

snip_20180405082230.png

As you fiddle with the palette, the Output section beneath the colors automatically generates JSON, SASS and PowerShell arrays for you! You can save these to files for reference later, but all we need is the PowerShell output. Copy it to your clipboard, and we’re done here!

snip_20180405082318

Create a tenant-wide theme with the SharePoint Online Management Shell

If you don’t have the latest SharePoint Online Management Shell installed, you can get it here.

Note that you will need SharePoint administrator permissions on your Office 365 tenant to create a tenant-wide theme.

Open up a PowerShell ISE window and copy the script below.  Make the following changes:

  1. Change the $adminSiteUrl to the URL of your admin tenant.
  2. Paste the PowerShell array you copied from the Theme Generator next to the $theme= line.
  3. Change the value of the $themeName variable.

$adminSiteUrl = "https://YOURTENANTNAME-admin.sharepoint.com"

$theme = #=Paste the PowerShell array from the theme generator here =#

$themeName = "{Your company name} Primary"

Connect-SPOService $adminSiteUrl #Will prompt for credentials

Add-SPOTheme -Name $themeName -Palette $theme -IsInverted $false

#Note: Use -Overwrite flag to update an existing theme

You’ll find documentation for the Add-SPOTheme commandlet here. If you want to check that your theme was properly created, the Get-SPOTheme commandlet returns all organizational themes:

snip_20180405084318.png

Test it out!

Navigate to a site on which you’re the admin or have permissions to change the look.  Click the gear icon, select Change the look, and you should see your new theme!

snip_20180405084530.png

This will work for Communication sites and Team sites.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s