Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Ink and yarn
  • Contact
A cup of dev

Create and add a custom color theme to SharePoint Online using PnP powershell

By Eli H. Schei on Sunday, 7 February 2021, 18:11Monday, 11 March 2024, 12:37
Prerequesites:

You need to have the PnP Powershell module installed to use the pnp powershell commands as described in this article.

If you just want to see the complete list of powershell commands you can jump directly to the last section.

Introduction

Most comapnies want to use their own brandcolors in SharePoint Online to make it look nice and familiar to their employees. Because of this custom color themes is a topic every MS365 developer should feel comfortable with. Also, it is quite straightforward.

In this blogpost I will show you how you can create a custom color palette, make the theme available tenant-wide, and how to set the theme on specific sites, all by using PNP-powershell.

Note, to change the color of the suitebar/navigationbar (the top bar that follows you around MS365 not just in SharePoint Online) you can do so in the admin-center. Go to Admin –> Settings –> Org Settings –> Organization profile and select Custom Themes.

Before you start you should open the CLI (command line interface) and connect to your tenant admin site. You do this by adding a “-admin” at the end of your domain. I also use the -Interactive parameter since I have MFA (multi factor authentication) enabled on my tenant.

<#Log in to your tenant #>
Connect-PnPOnline "https://yourtenant-admin.sharepoint.com" -Interactive

Create a custom color palette

If you are not sure if your tenant allready have a custom theme available you can use the command “Get-PnPTenantTheme to get a list of available themes.

If this command does not return anything, there are no custom themes in your tenant. Out of the box SharePoint themes will not show up in this list.

If there are multiple themes, like in the picture above, you can specify which theme you want by adding the theme name to your command. Add the -asJSon flag to get the color palette as a json-string you can copy.

<# Get all custom themes that are available in the tenant #>
Get-PnPTenantTheme
<# Get a specific theme by name, and as JSON #>
Get-PnPTenantTheme "Elis main theme" -asJson

Use a tool to create your color palette

If you dont have a custom theme to edit, or you want some visual help when creating your color palette you can use a tool like the Fluent UI Theme designer. I especially like this tool because it also tells you if your chosen colors keeps the wcag accessibility standards.

This article in the Microsoft docs gives you a nice overview over where the different color-variables is typicalle being used in SharePoint.

If you are wondering where the different colors show up Laura Kokkarinen has a great blogpost about this.

Make the new theme available on your tenant

When you have created the palette its time to make it available in your tenant. Create a variable that contains the color-palette. Use this variable when you run the Add-PnPTenantTheme command as shown below.

$color_palette = @{
      "themePrimary" = "#874070";
      "themeLighterAlt" = "#faf5f9";
      "themeLighter" = "#ecd8e5";
      "themeLight" = "#dbb8d0";
      "themeTertiary" = "#b77da5";
      "themeSecondary" = "#96507f";
      "themeDarkAlt" = "#7a3965";
      "themeDark" = "#673055";
      "themeDarker" = "#4c243f";
      "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-PnPTenantTheme -Identity "Elis Main Theme" -Palette $color_palette -IsInverted $false

Add the theme to a site

If you run “Get-PnPTenantTheme” again you can see your theme on the list. You can also find it through the UI. Go to a SharePoint site and select “Change the look” / “Themes”, and you will see your new theme in the list.

add a custom color theme to SharePoint Online using PNP powershell


So lets add the theme to a site using powershell. You do this by using the Set-PnPWebTheme command and adding the name of the theme, and the webUrl of the site as parameters.

Set-PnPWebTheme -Theme "Elis Main Theme" -WebUrl "https://yourtenant.sharepoint.com/sites/ThemeTestSite" 

Summary

In this blogpost I showed you how to create and add a custom color theme to your SharePoint Online tenant using PnP powershell.

Below are the complete list of commands used throughout this article.

<#Log in to your tenant #>
Connect-PnPOnline "https://yourtenant-admin.sharepoint.com" -Interactive

<# Get all custom themes that are available in the tenant #>
Get-PnPTenantTheme
<# Get a specific theme by name, and as JSON #>
Get-PnPTenantTheme "Elis main theme" -asJson

<# Create color palette variable #>
$color_palette = @{
      "themePrimary" = "#874070";
      "themeLighterAlt" = "#faf5f9";
      "themeLighter" = "#ecd8e5";
      "themeLight" = "#dbb8d0";
      "themeTertiary" = "#b77da5";
      "themeSecondary" = "#96507f";
      "themeDarkAlt" = "#7a3965";
      "themeDark" = "#673055";
      "themeDarker" = "#4c243f";
      "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 theme to tenant #>
Add-PnPTenantTheme -Identity "Elis Main Theme" -Palette $color_palette -IsInverted $false

<# Set the theme on a site #>
Set-PnPWebTheme -Theme "Elis Main Theme" -WebUrl "https://yourtenant.sharepoint.com/sites/ThemeTestSite" 

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

Also, if you have any feedback or questions, please let me know in the comments below. šŸ™‚

Thank you for reading, and happy coding!

/Eli

Share this:

  • Twitter
  • Facebook

Post navigation

Enable sideloading of apps in Microsoft Teams

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • Give your app granular permissions to a specific site or list in SharePoint
  • Microsoft Graph Magic: Simplifying User Removal from teams in Microsoft Teams
  • How to leverage teams-js in your Teams app; Working with user context and SharePoint site context
  • Building a ‘My Tools’ Web Part for SharePoint: Using SPfx and PnPjs
  • My top 3 most read blogpost of 2023

Categories

  • Azure
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • PowerApps
      • PowerApps Component Framework
    • SharePoint Framework
    • SharePoint Online
  • Tech Lead
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility app permissions ARIA azure Azure CLI azure functions Content creation custom themes favorites git github M365 CLI M365 development MS Graph PCF PnPjs PnP powershell power apps PowerApps Component Framework quicktip react resources SharePoint Online Sideloading SPfx Teams teams app dev Teams apps Tech lead tools wcag webdev Windows terminal
©2025 A cup of dev | WordPress Theme by SuperbThemes.com