Rob

Typically, you want to create a Modern SharePoint Theme to align your look and feel with your corporate colours. With the advent of the “modern” styles in SharePoint Online, theming is profoundly different to previous incarnations.

The most effective way to do it is to use PowerShell.

Using PowerShell to Create SharePoint Themes

I assume you’ve already installed the PowerShell ISE. Once you have it installed, you’ll need to install the SharePoint Online Management Shell. You’ll then need to Connect to SharePoint Online Powershell.

In your ISE, run the Get-SPOHideDefaultThemes. If you get the word false returned without any errors, you’re ready to roll.

Theme Generation for SharePoint

Now that you’re all set up, you’ll need to create a modern Sharepoint Theme to upload. Unless you’re a guru with hex code for RGB colours, you’re best off using the Theme Generator because it takes the pain out of getting your theme colours right. There are a number of benefits to using this generator, the most important being that you are warned if the colours you’ve chosen will cause problems with accessibility.

Once you’ve chosen your colours, click on the big Export Theme button at the top right of the screen, click on the PowerShell option and select the text in the text area for copying. You should have something like this:

@{
"themePrimary" = "#323232";
"themeLighterAlt" = "#f7f7f7";
"themeLighter" = "#dedede";
"themeLight" = "#c2c2c2";
"themeTertiary" = "#858585";
"themeSecondary" = "#4b4b4b";
"themeDarkAlt" = "#2e2e2e";
"themeDark" = "#272727";
"themeDarker" = "#1d1d1d";
"neutralLighterAlt" = "#f3f3f3";
"neutralLighter" = "#efefef";
"neutralLight" = "#e5e5e5";
"neutralQuaternaryAlt" = "#d6d6d6";
"neutralQuaternary" = "#cccccc";
"neutralTertiaryAlt" = "#c4c4c4";
"neutralTertiary" = "#bab8b7";
"neutralSecondary" = "#a3a2a0";
"neutralPrimaryAlt" = "#8d8b8a";
"neutralPrimary" = "#323130";
"neutralDark" = "#605e5d";
"black" = "#494847";
"white" = "#f9f9f9";
}

Now, armed with this code, flip back to your ISE and then type the following:

$palette =

Note that there is a space after the =. Not absolutely necessary, but readable code is good code! Paste in the text you copied from the Theme Generator to give:

$palette = @{
"themePrimary" = "#323232";
"themeLighterAlt" = "#f7f7f7";
"themeLighter" = "#dedede";
"themeLight" = "#c2c2c2";
"themeTertiary" = "#858585";
"themeSecondary" = "#4b4b4b";
"themeDarkAlt" = "#2e2e2e";
"themeDark" = "#272727";
"themeDarker" = "#1d1d1d";
"neutralLighterAlt" = "#f3f3f3";
"neutralLighter" = "#efefef";
"neutralLight" = "#e5e5e5";
"neutralQuaternaryAlt" = "#d6d6d6";
"neutralQuaternary" = "#cccccc";
"neutralTertiaryAlt" = "#c4c4c4";
"neutralTertiary" = "#bab8b7";
"neutralSecondary" = "#a3a2a0";
"neutralPrimaryAlt" = "#8d8b8a";
"neutralPrimary" = "#323130";
"neutralDark" = "#605e5d";
"black" = "#494847";
"white" = "#f9f9f9";
}

We now need to think of a name for our modern SharePoint theme we are creating, this will be displayed in SharePoint where you customise the look and feel. For this one, I’m going for Elephant Breath. We use this in the final line of our code:

Add-SPOTheme -Identity "Elephant Breath" -Palette $palette -IsInverted $false

This gives the final code of:

$palette = @{
"themePrimary" = "#323232";
"themeLighterAlt" = "#f7f7f7";
"themeLighter" = "#dedede";
"themeLight" = "#c2c2c2";
"themeTertiary" = "#858585";
"themeSecondary" = "#4b4b4b";
"themeDarkAlt" = "#2e2e2e";
"themeDark" = "#272727";
"themeDarker" = "#1d1d1d";
"neutralLighterAlt" = "#f3f3f3";
"neutralLighter" = "#efefef";
"neutralLight" = "#e5e5e5";
"neutralQuaternaryAlt" = "#d6d6d6";
"neutralQuaternary" = "#cccccc";
"neutralTertiaryAlt" = "#c4c4c4";
"neutralTertiary" = "#bab8b7";
"neutralSecondary" = "#a3a2a0";
"neutralPrimaryAlt" = "#8d8b8a";
"neutralPrimary" = "#323130";
"neutralDark" = "#605e5d";
"black" = "#494847";
"white" = "#f9f9f9";
}

Add-SPOTheme -Identity "Elephant Breath" -Palette $palette -IsInverted $false

Clicking on the green triangle on the action bar will run the code and add the theme to your SharePoint. Congratulations, you’ve managed to create a Modern SharPoint Theme You can now pick it in the Look and Feel section of SharePoint Site settings.