Create a Custom theme like a PRO on SharePoint Online

One question you might have asked yourself in your SharePoint Online journey might be: ‘How can I create a custom theme for my company brand?’.

By default SharePoint Online (SPO) only gives you access to the default themes, which limits you, when your business brand color differs from the spectrum that SPO offers 😭 .

Creating your custom theme is done with the help of Microsoft’s Fluent UI and Powershell (I’m using Powershell for this tutorial). Your next question might be: ‘So How do we create our own theme’?

Photo credit: https://hoteltransylvania.fandom.com/

Steps on creating a custom theme in SPO (I added a screen record of how to achieve the below steps)

1. Visit Microsoft’s Fluent UI site: https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html
2. Add your business’ brand color to the Primary color field
3. Alter the text or background color if you wish.
4. Crosscheck what your site page and elements (text, buttons, links) would look like on the right-hand side of the Fluent UI page.
5. Click Export theme
6. Click on the Powershell tab then
7. Copy the generated code

Fluent UI theme generator

Here is a sample of mine:

@{
“themePrimary” = “#388bb5”;
“themeLighterAlt” = “#f5fafc”;
“themeLighter” = “#d8eaf3”;
“themeLight” = “#b9d9e9”;
“themeTertiary” = “#7bb6d3”;
“themeSecondary” = “#4b97be”;
“themeDarkAlt” = “#337da3”;
“themeDark” = “#2b6a8a”;
“themeDarker” = “#1f4e65”;
“neutralLighterAlt” = “#faf9f8”;
“neutralLighter” = “#f3f2f1”;
“neutralLight” = “#edebe9”;
“neutralQuaternaryAlt” = “#e1dfdd”;
“neutralQuaternary” = “#d0d0d0”;
“neutralTertiaryAlt” = “#c8c6c4”;
“neutralTertiary” = “#a19f9d”;
“neutralSecondary” = “#605e5c”;
“neutralSecondaryAlt” = “#8a8886”;
“neutralPrimaryAlt” = “#3b3a39”;
“neutralPrimary” = “#323130”;
“neutralDark” = “#201f1e”;
“black” = “#000000”;
“white” = “#ffffff”;
}

Fluent UI does not add ‘Accent color’ by default, however, we could manually add it by ourselves. Hence the full script would become:

@{
“themePrimary” = “#388bb5”;
“themeLighterAlt” = “#f5fafc”;
“themeLighter” = “#d8eaf3”;
“themeLight” = “#b9d9e9”;
“themeTertiary” = “#7bb6d3”;
“themeSecondary” = “#4b97be”;
“themeDarkAlt” = “#337da3”;
“themeDark” = “#2b6a8a”;
“themeDarker” = “#1f4e65”;
“neutralLighterAlt” = “#faf9f8”;
“neutralLighter” = “#f3f2f1”;
“neutralLight” = “#edebe9”;
“neutralQuaternaryAlt” = “#e1dfdd”;
“neutralQuaternary” = “#d0d0d0”;
“neutralTertiaryAlt” = “#c8c6c4”;
“neutralTertiary” = “#a19f9d”;
“neutralSecondary” = “#605e5c”;
“neutralSecondaryAlt” = “#8a8886”;
“neutralPrimaryAlt” = “#3b3a39”;
“neutralPrimary” = “#323130”;
“neutralDark” = “#201f1e”;
“black” = “#000000”;
“white” = “#ffffff”;
“accent”= “#e80918”;
}

Now that our color is ready, Let’s run the Powershell script below, to deploy this to our SharePoint tenant:

Connect-SPOService -Url https://tenantname-admin.sharepoint.com/

$themepalette =@{

“themePrimary” = “#388bb5”;

“themeLighterAlt” = “#f5fafc”;

“themeLighter” = “#d8eaf3”;

“themeLight” = “#b9d9e9”;

“themeTertiary” = “#7bb6d3”;

“themeSecondary” = “#4b97be”;

“themeDarkAlt” = “#337da3”;

“themeDark” = “#2b6a8a”;

“themeDarker” = “#1f4e65”;

“neutralLighterAlt” = “#faf9f8”;

“neutralLighter” = “#f3f2f1”;

“neutralLight” = “#edebe9”;

“neutralQuaternaryAlt” = “#e1dfdd”;

“neutralQuaternary” = “#d0d0d0”;

“neutralTertiaryAlt” = “#c8c6c4”;

“neutralTertiary” = “#a19f9d”;

“neutralSecondary” = “#605e5c”;

“neutralSecondaryAlt” = “#8a8886”;

“neutralPrimaryAlt” = “#3b3a39”;

“neutralPrimary” = “#323130”;

“neutralDark” = “#201f1e”;

“black” = “#000000”;

“white” = “#ffffff”;

“accent”= “#e80918”;

}

Add-SPOTheme -Identity “custom-theme-name” -Palette $themepalette -IsInverted $false

Connect-SPO would require a global administrator’s login to connect to your SharePoint tenant.
Add-SPOTheme deploys this theme to your SPO tenant.
While -Identity sets the theme name which gets displayed on SPO when deployed (my theme name is ‘blog-theme’.

After deploying, Visit any site collection, click on the Settings icon -> Change the look -> Theme

Then select the theme:

The ‘red’ color is my accent color.

If you wish to delete a custom theme from your tenant/site collection, use the below Powershell command:

Remove-SPOTheme -Name “custom-theme-name”

So there you go!!! KEEP CUSTOMIZING!!!!

Photo credit: https://www.awn.com/