Creating and Deploying a Custom Theme in SharePoint Online

Also see my follow up post…

If you’re moving from classic SharePoint to modern, sooner or later (I’m guessing sooner), you’ll want some control over the colors and fonts in your modern sites. I think the main reason people decide they need to do something about this is the random colors which are assigned to each new site as you create it.

Looking at just a handful of modern sites in our Sympraxis tenant, you can see what I mean.

If you’re in a classic site, you’re going to have weird half and half theming options. There are two different theming engines.

  • Classic Change the look options – which means the old type of theme (the ones which include Sea Monster!).
  • Modern themes in the modern Change the look options. (The modern Change the look options are in mid-upgrade to add new options [Navigation and Footer], but you won’t see those options in a classic site.)

Modern themes do get applied to classic pages, so if you have a mix, you should use a modern theme.

You can create a custom modern theme using the Theme Generator tool. Unfortunately, there are only three “slots” you can change in the tool:

  • Primary Theme Color
  • Body Text Color
  • Body Background Color

The code you need is generated in a box in the page and you can copy it out when you are done.

What I’d love to see is two enhancements: the ability to enter more color codes to change “slots” beyond the three above, and the ability to paste existing theme code back into the tool to tweak further.

The trick then is to deploy the theme you have generated. You can certainly use a Site Script, but for a one-off, it probably makes more sense to use a little Powershell.

You do need to be a SharePoint Admin for this to work because you have to connect to https://[mytenant]-admin.sharepoint.com to deploy the custom theme.

The theme is then available to all sites, but you have to apply it in the Change the look settings.

The Powershell for this is really simple, and any admin worth their salt should be ably to follow any of the three posts below with no problem – it’s just three lines. If you create a theme in the Theme Generator, you can just give your admin the theme settings. The easiest format for them to deal with would probably be from the PowerShell tab.

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

$themepalette = @{
"themePrimary" = "#3395cf";
"themeLighterAlt" = "#f5fafd";
"themeLighter" = "#daecf7";
"themeLight" = "#baddf0";
"themeTertiary" = "#7cbde2";
"themeSecondary" = "#48a1d4";
"themeDarkAlt" = "#2e87ba";
"themeDark" = "#27729d";
"themeDarker" = "#1d5474";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#b9bec9";
"neutralSecondary" = "#7c8392";
"neutralPrimaryAlt" = "#4a5160";
"neutralPrimary" = "#363c49";
"neutralDark" = "#2a2e38";
"black" = "#1f2229";
"white" = "#ffffff";
}

Add-SPOTheme -Identity "My Company Theme" -Palette $themepalette -IsInverted $false

Microsoft Documentation

Blog Posts

Each of these posts walk you through creating a custom theme with the Theme Generator and deploying it to a site using the SharePoint Online Management Shell (PowerShell). They are all good, and each takes a slightly different slant.


Also see Creating and Deploying a Custom Theme in SharePoint Online – Follow Up.

Similar Posts

8 Comments

  1. Hi,

    Can we apply different theme based on the user logged in.

    If I want to blue theme for some users and for others if i need red theme, is it possible to change it on the fly.

    Please guide.

    Thanks
    anand

    1. @Anand:

      There’s nothing built in to do this. Depending on how deep you want those differences to go, you could use a SPFx Extension. But I’d suggest you not go down that path, as it may give you issues down the road. In any case, do NOT try to inject CSS or JavaScript into the page that reaches into page areas not within the Extension.

      M.

  2. Is it possible to create a theme to a specific site and apply to that site only. Since our organization is not allowing to run any script at tenant level, can you please suggest an alternative way to apply css on all the modern pages.

    1. @aditya:

      Themes are deployed at the SharePoint Admin level, so the answer is no. If your org isn’t allowing PowerShell at all, you’re going to have many difficulties working with newer capabilities where the only deployment or provisioning opinion is via PowerShell. You’ll also have a tough time administering the tenant, but maybe that’s nit your job. Best advice: have a clear conversation with the powers that be about what you want to accomplish and how it works.

      M.

  3. Is it my imagination or can deploying an app be extremely fickle. I refresh multiple times and maybe 10% of the time the CSS applies. Sometimes it seems to be getting an older version of the custom.css, which suggests some layers of caching or distributed resources that are not immediately in sync.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.