SharePoint Online – Custom branding for modern sites

The custom branding options in SharePoint Online change quite frequently. I found a few different options of doing things but not all options work when you are using Hub Sites.

Attempt 1 – Uploading a new spcolor file

In the past I would upload my spcolor file to a folder in SharePoint /_catalogs/15/theme within my site collection. However this doesn’t seem to work anymore. The steps have been described in a post written in 2017.

Whatever I do however I get permission denied message when I try to upload my .pscolor file. This is probably expected for SharePoint hub sites as hub sites share their theme files with the sites that are part of the same hub. Therefore when you use hub sites you will have to change your approach a bit.

Attempt 2 – PnP PowerShell

I’ll start by supplying the script that does all the work. You can also find this on the Add-PnPTenantTheme page.

First note that the theme needs to be uploaded to the tenant rather than to your site collection when you use hub sites. This is why you need to connect to the SharePoint admin url rather than your SharePoint

Clear-Host

$targetSiteCollection = "https://mycorp-admin.sharepoint.com"
Connect-PnPOnline -UseWebLogin -Url $targetSiteCollection

$themepalette = @{"themePrimary" = "#0073AC";
"themeLighterAlt" = "#f3fcfc";
"themeLighter" = "#0073AC";
"themeLight" = "#affefe";
"themeTertiary" = "#0073AC";
"themeSecondary" = "#0073AC";
"themeDarkAlt" = "#0073AC";
"themeDark" = "#009090";
"themeDarker" = "#005252";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#a6a6a6";
"neutralSecondaryAlt" = "#767676";
"neutralSecondary" = "#666666";
"neutralPrimary" = "#333";
"neutralPrimaryAlt" = "#3c3c3c";
"neutralDark" = "#212121";
"black" = "#000000";
"white" = "#fff";
"primaryBackground" = "#fff";
"primaryText" = "#333"
}

Add-PnPTenantTheme -Identity "MyCorp" -Palette $themepalette -IsInverted $false -Overwrite

As you change the colours specified above you will find that the theme is available straight after the theme file has been uploaded with Add-PnPTenantTheme. As shown below my new theme is available.

But what if you want to update your theme? Can you just rerun the script?

Yes, you can just rerun the script. Notice the Overwrite flag on the Add-PnPTenantTheme line. However this will not apply the theme. You could use the Set-PnPTheme Cmdlet to apply the theme or you can simply reapply the updated theme within the SharePoint UI.

For more details on the existing themes there is some documentation. When you want to update the theme, the browser developer tools will be helpful. Simply check the colour settings for the element that you want to update and then search for the colour used in the theme json shown above in the script.

Pieter Veenstra

Is your business still running on paper trails, sprawling Excel files, or ageing Access databases? There's a better way — and I can show you exactly what it looks like. I'm the Technical Director of Vantage 365, a Microsoft solutions consultancy working with clients across the UK, the Netherlands, and worldwide. For over 30 years I've been turning messy, manual business processes into clean, automated systems that save time, reduce errors, and give teams the visibility they need to make better decisions. SharePains is not just any blog run by a Microsoft MVP. Have you ever used Try-Catch in Power Automate? The original post about Try-Catch in Power Automate can still be found on this site, https://sharepains.com/2018/02/07/try-catch-finally-in-power-automate-flow/ Or have you ever used the Pieter’s method to avoid variables and speed up your flows? https://sharepains.com/2020/03/11/pieters-method-for-advanced-in-flows/ You can contact me using contact@sharepains.com