Corey Roth [MVP]

At Microsoft Ignite, they announced new capabilities for working with themes on modern sites.  Although, the new theme picker they have shown has not rolled out, you can still make use of the new theming capabilities right now.

Here is what the old theme picker looks like.  When we are done, we’ll have our own themes in there and the stock themes will be gone.  No longer will your users pick some awful theme for your sites!

The easiest way to build your new theme is to go to the Theme Generator page on the Office Fabric site.  Here you can set a color and it will automatically choose a palette for you.  You can override the colors in the palette based upon your own company’s brand standard.  Just pick a Primary theme color or enter in the hex or RGB codes.

When you scroll down, you will find the code you need, but scroll even further and you will see a preview of what the Fabric Palette looks like.

Once you are happy, we’ll cut and paste the theme definition into our PowerShell script.  However, before we do that, we have to install the SharePoint Online Management Shell (if you don’t have it already) and connect to SharePoint Online.  You’ll need version 16.0.6906.1200 or newer.  If you haven’t updated in a while, download it again.

One you have it installed, you need to connect to SharePoint Online.  You’ll need to use an account with the SharePoint administrator or Global Administrator roles.  The process involves specifying the URL for your SharePoint Online tenant and the credentials.

$adminUPN="admin@mydomain.onmicrosoft.com"

$orgName="mydomain"

$userCredential = Get-Credential -UserName $adminUPN -Message "Type the password."

Connect-SPOService -Url https://$orgName-admin.sharepoint.com -Credential $userCredential

If you have trouble connecting, you can find more details on Microsoft Docs.  If you use multi-factor authentication, leave off the credential parameter and it will prompt you with an OAuth login prompt.  I’ll usually save this snipped in a PowerShell script so I don’t have to look it up every time.

Now that you are connected, we can add a theme. Create a new PowerShell script using PowerShell ISE, Visual Studio Code, or whatever editor you like.  Add the following to the script.

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
}

$themepallette = HashToDictionary(

)

Add-SPOTheme -Name "New Company Theme" -Palette $themepallette -IsInverted $false -Overwrite

PowerShell expects the theme in the format of a dictionary object.  That is what the helper method HashToDictionary does.  Now we paste in our color palette from the Theme Generator into the call to the HashToDictionary method.  Be sure to incldue the @ symbol.  Here is what the palette looks like on the theme generator.

Cut and paste that into the script.  The completed script will now look like the following:

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
}

$themepallette = HashToDictionary(
@{
"themePrimary" = "#4ea3e9";
"themeLighterAlt" = "#f6fafe";
"themeLighter" = "#edf6fd";
"themeLight" = "#dbecfa";
"themeTertiary" = "#b4d8f5";
"themeSecondary" = "#5eabea";
"themeDarkAlt" = "#3194e5";
"themeDark" = "#1974bf";
"themeDarker" = "#135b96";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#b5b5b5";
"neutralSecondary" = "#868686";
"neutralPrimaryAlt" = "#6e6e6e";
"neutralPrimary" = "#252525";
"neutralDark" = "#565656";
"black" = "#3e3e3e";
"white" = "#ffffff";
"primaryBackground" = "#ffffff";
"primaryText" = "#252525";
"bodyBackground" = "#ffffff";
"bodyText" = "#252525";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}
)

Add-SPOTheme -Name "New Company Theme" -Palette $themepallette -IsInverted $false -Overwrite

The Add-SPOTheme Cmdlet has a few parameters.  Name should be fairly self explanatory.  Set IsInverted to true if you are using an inverted theme (ie high contract / black background).  Add the Overwrite to allow you to update the theme after it has been created.  Run the PowerShell script to see your new theme.  Running it will not yield any output if it is successful.

Refresh your SharePoint site and click on Change the Look underneath the Cog Wheel.  You should see your new theme.

Select the theme to apply it to preview it on your site.

Pretty simple right?  Now, if you want to remove the out-of-the-box themes.  That’s easy too.  Go back to PowerShell and issue the following command.

Set-HideDefaultThemes $true

Refresh your site and you will see that the out-of-the-box themes are now gone.

That’s all there is to it.  There are a few more commands if you want to inspect what themes are installed or you want to remove one.  You can read more about them on Microsoft Docs.  Give it a try today!