Helloooo everyone!
This post will show you how to generate a Modern SharePoint Theme for any color using PowerShell and then deploy it to a SharePoint tenant. I have worked on SO many different Modern SharePoint environments and this is a process I find myself doing over and over.
For the first step you should already know the HEX or the RBG of the primary color you want for your theme.
1. Navigate to the SharePoint Theme Generator: https://developer.microsoft.com/en-us/fluentui#/styles/themegenerator?fabricVer=5
2. In the “Primary Theme Color” section, apply your Hex or RBG so the colour shows what you want. You can also change the “Body Text Color” and “Body Background Color” but for I mostly leave as they are.
3. After applying your color this will automatically generate the PowerShell code for your Theme. Scroll down to the “Output” section and copy all of the code generated in the PowerShell column (copy this snippet to a new notepad file or any content editor file):
4. Next you want to open SharePoint Online Management Shell. You can download it here: https://www.microsoft.com/en-au/download/details.aspx?id=35588
Start a new SharePoint Online Management Shell window as administrator (right click and select run as administrator)
5. Now its time to write the PowerShell scripts. First we need to connect to your SharePoint tenant. Do this by running the following snippet of code (insert your tenant name where it says “YourTenantName“).
Connect-SPOService -Url https://YourTenantName-admin.sharepoint.com -Credential $userCredential
When you run the command a login window will pop up. The account you use to login here must be an administrator of your tenant:
6. Once successfully connected to your tenant paste the following block of code into SharePoint Online Management Shell:
function HashToDictionary {
Param ([Hashtable]$ht)
$dictionary = New-Object "System.Collections.Generic.Dictionary``2[System.String,System.String]"
foreach ($entry in $ht.GetEnumerator()) {
$dictionary.Add($entry.Name, $entry.Value)
}
return $dictionary
}
7. Next you need to get the chunk of code which you copied earlier from the Theme Generator. Paste this in between the following snipped replacing where it states *COPY HERE*:
$themepallette = HashToDictionary(
*COPY HERE*
)
When you have pasted your code it should look something like this:
$themepallette = HashToDictionary(
@{
"themePrimary" = "#1d1d1d";
"themeLighterAlt" = "#e4e4e4";
"themeLighter" = "#cbcbcb";
"themeLight" = "#b2b2b2";
"themeTertiary" = "#999999";
"themeSecondary" = "#808080";
"themeDarkAlt" = "#676767";
"themeDark" = "#4e4e4e";
"themeDarker" = "#353535";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#c2c2c2";
"neutralSecondary" = "#858585";
"neutralPrimaryAlt" = "#4b4b4b";
"neutralPrimary" = "#333333";
"neutralDark" = "#272727";
"black" = "#1d1d1d";
"white" = "#ffffff";
"primaryBackground" = "#ffffff";
"primaryText" = "#333333";
"bodyBackground" = "#ffffff";
"bodyText" = "#333333";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}
)
8. Now take this whole piece of code and paste it into your SharePoint Online Management Shell window:
9. Finally run the following snippet of code in SharePoint Online Management Shell:
Add-SPOTheme -Name "YOUR THEME NAME" -Palette $themepallette -IsInverted $false
10. You will now have a custom Theme available in your SharePoint tenant to apply to any Modern sites. Do this by clicking the cog in the top right corner of a Modern site and select “change the look”, next select theme and you will see your custom Theme available for selection:
I hope this post has helped you. If there is anything that I can improve on or if there is anything I can help you with please do not hesitate to reach out. Also please follow us on LinkedIn 🙂 https://www.linkedin.com/company/wetechcareofyou/
Be Safe And Have A Lovely Day!