Well, the good news is that Microsoft has released recently the custom theme capability, thus you can now change the look & feel of SharePoint via custom themes, so it looks a bit more like the rest of your organisation’s applications.

 

With SharePoint themes capability you can easily define custom themes and make them available for site owners to choose.

 

To generate a new theme, you just need to go to https://aka.ms/themedesigner, which is the official theme designer tool provided by Microsoft.

 

Once in the online theme generator, you can generate a new theme by choosing basically three colours, the primary colour, text colour and background colour.

 

 

Once you update the colours, the generator tool automatically shows you a preview of the controls found in SharePoint, it gives you an idea on how it is going to look on your SharePoint site.

 

Also, it has an accessibility checker that validates if your theme is compliant with the accessibility web standards. If your colours don’t comply, it shows you an error message and the problems to fix as in the image below.

 

 

Once you have fixed the colour issues, basically by picking a different colour, the accessibility checker is going to display a validated message, like the one below.

 

 

Based on the colours chosen, the generator also updates all the pallet colours automatically. You can check the colours on the Theme slots section of the page.

 

 

Now that you are happy with the theme, you need to export it so you can then add it to your SharePoint environment. To do that, you need to click on “Export theme” button on the top right.

 

Theme exporter gives you three options, you can either use code to apply it through a custom application, JSON for an API call or PowerShell to use the management shell. I personally advise using the PowerShell option as it does not require coding experience to apply the theme.

 

To use the PowerShell option, please copy the code exported and put it on the side for now.

 

First, download and install the SharePoint Online Management Shell. Please uninstall any previous version of the shell before installing it in case you already have an old version of it.

 

Now follow the instructions described on Connect to SharePoint Online PowerShell to connect to your SharePoint tenant.

 

Ok now that you’re all set, if you wanted to check if you have already a custom theme on your SharePoint environment, you can run the command Get-SPOTheme which lists all custom themes.

 

Next, you need to add the theme you’ve exported, for that you need to do the following:

 

Replace the following code with the exported code from the theme generator:

 

$themepalette = replace this with the code extracted from the generator

Add-SPOTheme -Identity “replace this with the theme name” -Palette $themepalette -IsInverted $false

Your code should look like this:

$themepalette = @{

“themePrimary” = “#b85c00”;

“themeLighterAlt” = “#fcf7f2”;

“themeLighter” = “#f4e0cd”;

“themeLight” = “#eac7a4”;

“themeTertiary” = “#d49555”;

“themeSecondary” = “#c06c17”;

“themeDarkAlt” = “#a55300”;

“themeDark” = “#8c4600”;

“themeDarker” = “#673300”;

“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-SPOTheme -Identity “Custom theme” -Palette $themepalette -IsInverted $false

 

Now copy this code and paste it on your management shell.

 

 

After the code finishes running, you can now run again the Get-SPOTheme command, it should return your theme.

 

 

Finally, to apply the theme to your SharePoint site, please go to the site then do the following steps:

1. As a site owner, click on the cog icon on the top right, then click on “Change the look” link.

 

 

2. Now click on “Theme” option.

 

 

3. Then select your theme and click on Save

 

 

That’s it! 

 

Now your site is fully themed, and the good news is that if your site is registered as a hub site, you don’t need to update the theme of all the sites associated with it as it is done automatically.

 

I hope you have learned something new with this and please leave a comment if you have any questions.