loader image


  • Home
SharePoint Online Custom Themes
Carlos Garcia February 13, 2020 0 Comments

SharePoint modern sites are great! Customers love the modern design and it is so easy and user-friendly with all drag and drop capabilities and built-in responsive design. However, a common request lately from customers is that they are keen to make SharePoint looking more like the rest of their software suite.

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.


SharePoint Custom Themes

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.



SharePoint theme colours
SharePoint theme colours

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.


SharePoint theme preview
SharePoint theme preview

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.


SharePoint theme accessibility checker failed
SharePoint theme accessibility checker failed


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.


SharePoint theme accessibility checker sucess
SharePoint theme accessibility checker sucess


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.


SharePoint theme slots
SharePoint theme slots


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.


SharePoint theme - Add-SPOTheme command
SharePoint theme – Add-SPOTheme command


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


SharePoint theme - Get-SPOTheme command
SharePoint theme – Get-SPOTheme command


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.


SharePoint Settings
SharePoint Settings


2. Now click on “Theme” option.


SharePoint change the look settings
SharePoint change the look settings


3. Then select your theme and click on Save


SharePoint theme settings
SharePoint theme settings


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.

Leave Comment