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 $falseMicrosoft Documentation
- SharePoint site theming – Explains what a theme is and how to use one.
- SharePoint site theming: JSON schema – Describes the JSON schema used in a theme and what each setting does. While the Theme Generator tool helps you change most settings, you may end up editing the theme manually after you created it for final polish.
- SharePoint site design and site script overview – Describes how sites scripts work and can be used to deploy a theme to multiple sites (along with a lot of other capabilities).
Blog Posts
- How To Create A Multicolored Theme for a Modern SharePoint Online Site by Laura Kokkarinen
- Brand modern SharePoint Online sites by Joao Ferreira
- Create and Deploy Your Own Custom SharePoint Theme by Khoa Quach at NIFTIT
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.
Is it possible to do this without coding?
@ClaySys:
I believe you still need to run PowerShell to deploy the theme, but applying it to sites can be done in the UI.
M.
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
@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.
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.
@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.
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.