Create and apply a new Theme to a SharePoint Modern site

Firstly, the pre-requisites ensure that you have installed the following;

When this has been installed its time to install the SharePoint PnP PowerShell onto your machine valid (scoped) for the user you are logged in as.  Open up a SharePoint Management Shell window and run the following command;

  • Install-Module SharePointPnPPowerShellOnline -Scope CurrentUser

Next you need to create a theme using the online Micrososft Theme Generator ( https://developer.microsoft.com/en-us/fabric#/styles/themegenerator ). Use the tool to select the primary theme colour, the body text colour and the body background colour. When you are happy with the colours you need to copy the theme. To do this select the Output in the theme generator as PowerShell and copy the resulting output.

In the SharePoint Management Shell window you opened earlier create a variable to store this theme, for example

$newtheme=@{
“themePrimary” = “#335b79”;
“themeLighterAlt” = “#f4f7fa”;
“themeLighter” = “#d4e0e9”;
“themeLight” = “#b1c6d6”;
“themeTertiary” = “#7194ae”;
“themeSecondary” = “#436a88”;
“themeDarkAlt” = “#2d516c”;
“themeDark” = “#26445b”;
“themeDarker” = “#1c3243”;
“neutralLighterAlt” = “#f8f8f8”;
“neutralLighter” = “#f4f4f4”;
“neutralLight” = “#eaeaea”;
“neutralQuaternaryAlt” = “#dadada”;
“neutralQuaternary” = “#d0d0d0”;
“neutralTertiaryAlt” = “#c8c8c8”;
“neutralTertiary” = “#d6adad”;
“neutralSecondary” = “#ae6b6b”;
“neutralPrimaryAlt” = “#883b3b”;
“neutralPrimary” = “#782b2b”;
“neutralDark” = “#5b2121”;
“black” = “#431818”;
“white” = “#f6f6f6”;
“bodyBackground” = “#f6f6f6”;
“bodyText” = “#040000″;
}

Now for some more PowerShell, first connect to your tenant using your tenant admin credentials and then add the theme to your tenant;

$siteurl=”https://<tenant>-admin.sharepoint.com”
Connect-SPOService -url $siteurl
Add-SPOTheme -Name “mytheme” -Palette $newtheme -IsInverted $false -Overwrite

Now that the theme has been uploaded you can access it from the SharePoint cog and then click Change the look.

If you want to remove the default themes so that only the Company themes are available when changing the look run the following command PowerShell command

Set-SPOHideDefaultThemes $true

And that’s it.

 

About the author