Creating a new site theme in SharePoint Online

SharePoint Online Site Themes:

SharePoint comes with a number ready made out of the box themes that you can apply to your SharePoint site(s). The themes can transform your site to give it a more unique feel. You can change the theme by navigating to the Settings (Cog) > Change the look > Theme. Once there you will be presented with the available themes.

More recently you are able to customise the out of the box themes. At the time of

Although this allows you to customise existing themes you may not find the colours that match your branding. 

Often organisations want to use there own brand colours to personalise their SharePoint sites. With a few steps it is possible to create and import your own theme(s) in to your SharePoint environment. You can then utilise the theme(s) by adding them manually to sites or in your site designs.

Benefits of having a custom site theme

• You or other site owners can switch to the company branded theme once added to your tenant
• It will be available to all sites in the tenant
• Makes your SharePoint sites feel more custom and part of your organisation with those familiar company colours

Potential downsides to a site theme

• Takes time create the theme and ensure it is accessible
• May need to redo the theme if there is an issue when added to your environment.

Recommendations

Obtain a copy of your organisations branding guide to use the Hex codes for creating your theme in the designer.

Add your theme to a test environment first. This will allow you to apply it to some sites and test it's look and feel with a small pilot group. As well as identify any accessibility issues that the accessibility checker may not have identified.

In order to add your own site designs you will need the relevant SharePoint Admin permissions and be able to run PowerShell scripts in the environment(s). 

Getting started on creating a theme

In order to add a theme to your tenant you will need enough knowledge of PowerShell to create and run the script.  In this steps to replicate I give you some guidance to get you started but you should be cautious if you are new to PowerShell. I recommend always trying this in a test environment first, whether your new to PowerShell or seasoned. 

You will also need the relevant permissions to connect to the SharePoint admin for running the script. 

Resources

Here are some resources I found useful when creating my site themes.

• SharePoint site theming
• Theme Generator

Steps to replicate

Use Microsoft Theme Designer to help select the colours for your theme. Watch my YouTube video for more guidance. [See end of blog]

The central screen will show you a demo of what the theme will look like for buttons, text, menus etc. You can use it to only change Primary colour, Text, and background or you can go into more detail further down the page and change more. 

If your organisation has a company branding guide this should contain the Hex codes required to build the theme.

Once you're happy with the theme you have created you can Export using the export theme button.

You will then be presented with options. For my steps I select the PowerShell Tab ,then select the content and copy. This is then used in the PowerShell Script.

Now you have this you can build your script.

The PowerShell Script

Create a new script and do the following

1. Add\update the variables in section 1: (See 1 in image below) Insert\replace with your admin site URL, (See 2 in image below) Insert\replace with your theme name - keep the name short and recognisable. This could be the company name or similar.
2. In section 2 paste in your generated code from the theme generator (See 2 in image below). In the example script below I have included a sample of the generated code. If you use my script you should replace the sample I have provide (coloured text)

Sample site theme script

Below is a copy of a script you can use and amend as needed. Refer to the above to create your theme using this script as a starting point.

# Section 1 - Update the below variables with your admin URL and theme name 

$adminSiteUrl = "https://COMPANY-admin.sharepoint.com" 1. Replace as required

$themeName = "Theme-1" 2. Replace and name your new theme as required

Connect-SPOService $adminSiteUrl 

# Section 2 - Add the generated code from the theme generator below (example shown of how code would appear)

$palette =

@{

"themePrimary" = "#0078d4";

"themeLighterAlt" = "#eff6fc";

"themeLighter" = "#deecf9";

"themeLight" = "#c7e0f4";

"themeTertiary" = "#71afe5";

"themeSecondary" = "#2b88d8";

"themeDarkAlt" = "#106ebe";

"themeDark" = "#005a9e";

"themeDarker" = "#004578";

"neutralLighterAlt" = "#faf9f8";

"neutralLighter" = "#f3f2f1";

"neutralLight" = "#edebe9";

"neutralQuaternaryAlt" = "#e1dfdd";

"neutralQuaternary" = "#d0d0d0";

"neutralTertiaryAlt" = "#c8c6c4";

"neutralTertiary" = "#a19f9d";

"neutralSecondary" = "#605e5c";

"neutralPrimaryAlt" = "#3b3a39";

"neutralPrimary" = "#323130";

"neutralDark" = "#201f1e";

"black" = "#000000";

"white" = "#ffffff";

}

# Script now adds above theme to tenanet using the theme name provided above 

Add-SPOTheme -Name $themeName -Palette $palette -IsInverted:$false -Overwrite

# Confirmation script has completed

Write-Host "Theme has been added to SharePoint" -ForegroundColor Green

Summary

Site themes can transform your SharePoint sites and make them feel like a tool specific to your organisation.  They take a little time to create and test but once done they are available across the environment. As mentioned I would always recommend testing these themes in your test environments first.