Create Custom Theme for SharePoint Site using PowerShell

To enhance the aesthetics of your SharePoint site and align it with your brand's visual identity, you have the option of applying a theme from among those predefined by SharePoint. However, it's unfortunate that Microsoft hasn't yet introduced the ability to customize colors to faithfully reflect your brand's image. This would have enabled a more accurate and authentic representation of your brand identity.

Today, I'll show you how to add custom themes of your choice to suit your needs.

I - How to use Sharepoint default themes :

The choices are pretty limited. If you choose Gear Icon > Change the look > Themes, you will notice a palette of just 13 color themes.

II - How to configure and apply a custom theme in SharePoint Online

Step 1: Create a custom theme using the Theme Generator Tool

1. Navigate to this URL to generate your new theme : https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/
2. You can use the Color section to choose your custom colors that match your brand. You will get to see the sample page render in real-time, showing you what the page will look like with new colors. It will also check the page for any accessibility issues and provide you warnings/guidance at the bottom of the screen.

I'm going to choose these colors to avoid the contrast-related error message.

3. Next, click Export theme in the upper-right-hand-corner.

4. On the next screen, choose PowerShell tab, then copy all of the text into a Notepad (we will need it for future steps)

the next step is to open Windows PowerShell ISE (As administrator) and copy/paste the code found in the code section at the bottom, then replace the value of the "CustomTheme1" value with your PowerShell code already copied to Notepad.

You should add your Custom Theme PowerShell code after this section :

The code below initiates a check to determine whether the "SharePoint Online Management Shell" library is installed. If it is not present, the code installs it. If not, a library update is performed. This approach ensures that you always have the latest version of the "SharePoint Online Management Shell" library.

Next, it will launch a Sharepoint authentication window (note that you must have the appropriate Sharepoint rights, such as Global Admin or Sharepoint Admin, to be able to run the code without errors).

And finally, your custon Theme will be installed successfully.

Here is the Full Code :

# check if you have already installed the SharePoint Online Management Shell
if( !(Get-Module -Name Microsoft.Online.SharePoint.PowerShell -ListAvailable))
{

    # install the SharePoint Online Management Shell
    Install-Module -Name Microsoft.Online.SharePoint.PowerShell -Force
    Write-Host "SharePoint Online Successfully installed.............." -ForegroundColor Green
}
else
{
    # if the SharePoint Online is existing we will update it
    Update-Module -Name Microsoft.Online.SharePoint.PowerShell -Force
    Write-Host "SharePoint Online Successfully updated.............." -ForegroundColor yellow
}

# To connect with multifactor authentication (MFA)
Connect-SPOService -Url https://lithionrecycling-admin.sharepoint.com

# Custom Theme Variable
$CustomTheme1 = 
# You must copy paste your Custom Theme Code here
@{
"themePrimary" = "#0700d4";
"themeLighterAlt" = "#f3f3fd";
"themeLighter" = "#d2d0f8";
"themeLight" = "#aca9f2";
"themeTertiary" = "#605ce5";
"themeSecondary" = "#201ad9";
"themeDarkAlt" = "#0600be";
"themeDark" = "#0500a1";
"themeDarker" = "#040077";
"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";
}

# Add Custom Theme to SharePoint
try
{
    # Add new sharepoint theme
    Add-SPOTheme -Identity "Custom-Theme-01" -Palette $CustomTheme1 -IsInverted $false

    Write-Host "Custom theme Successfully installed .............." -ForegroundColor Green

}
catch
{
    Write-Host "Error while adding new theme .............." -ForegroundColor Red
}
        

Here's the result of adding two custom themes to SharePoint. If you've noticed, they appear under the "From your Organisation" category.

Thanks

Aymen EL JAZIRI