Custom color template for SharePoint Online using PowerShell

In this article, I will share with you how to deploy a custom Sharepoint online color palette for your branding.

This would be the first step in the branding journey.

As SharePoint Online provides some limited out of the box color palettes, you might be tempted to design your own palette.

Resources required:

In order to customize and deploy your own color templates, you will need:

Steps:

1- Install the SharePoint Online management shell, this will be required to authenticate to your SharePoint tenant and push the template later.

2- Navigate to the Theme Generator, and customize your branding colors.

Once you are happy with your new color palette, you can click on the “export theme” button.

This will generate the palette in three different formats, Code, Json & PowerShell.

In this article we will use PowerShell to push the palette to our tenant.

Please remember, the color palette is deployed to the entire tenant, so it will be available to all your sites.

PowerShell Script to push the color palette

Using the command Add-SPOTheme, we will publish the palette to our tenant.

$adminSiteUrl = "https://<<YOURTEN>>-admin.sharepoint.com"
$themeName = "<<YOUR PALETTE NAME>>"
Connect-SPOService $adminSiteUrl

#Uncomment if you want to update an existing theme
#Remove-SPOTheme -name $themeName

#Replace the variable value with the generated code
$palette =@{
"themePrimary" = "#2170ad";
"themeLighterAlt" = "#f4f8fc";
"themeLighter" = "#d3e4f2";
"themeLight" = "#afcee7";
"themeTertiary" = "#6aa3ce";
"themeSecondary" = "#357fb7";
"themeDarkAlt" = "#1e659c";
"themeDark" = "#195684";
"themeDarker" = "#123f61";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#7ea0b7";
"neutralSecondary" = "#5e86a0";
"neutralPrimaryAlt" = "#436d88";
"neutralPrimary" = "#041c2c";
"neutralDark" = "#1a405a";
"black" = "#0d2d43";
"white" = "#ffffff";
"primaryBackground" = "#ffffff";
"primaryText" = "#041c2c";
"bodyBackground" = "#ffffff";
"bodyText" = "#041c2c";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}

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