How to create Intranet with SharePoint Modern Communication Sites – Part 3

In my previous post I demonstrated how to add Megamenu navigation and Footer to Modern SharePoint Communication sites. In this post I will show how to create and add custom Site Theme to Modern SharePoint Sites and apply the Theme to all Hub Sites at once.

SharePoint Online Site Themes

SharePoint Online Sites have ability to change site theme from eight ready-made out-of-the-box site themes. You can select the theme by clicking the Gear -icon from Office 365 ribbon and then select Change the look -link from the drop down menu. In Change the look -dialog there is theme -option where you can find Site Themes.

Out-of-the-box Site Themes

If you have requirement to tune your site colors, you can start to customize out-of-the-box SharePoint Themes by selecting the theme and clicking Customize -link. See picture below.

Customize theme

That way you can change main and accent colors to the site theme.

Color options for theme

Create custom Site Theme

Microsoft has created good documentation how to create Custom Site Themes. We need to create custom color palette for theme and apply that to the SharePoint Online tenant.

We can use Microsoft Theme generator for creating custom color palette for our theme. In Theme generator you can select colors and you get PowerShell or JSON code as output.

Microsoft Theme Generator

Add Theme to SharePoint Online Tenant with PowerShell

When you have finished your theme colors in Theme Generator, take and copy the PowerShell Output.

#Powershell
@{
"themePrimary" = "#e20a16";
"themeLighterAlt" = "#fef4f5";
"themeLighter" = "#fbd4d6";
"themeLight" = "#f7b0b3";
"themeTertiary" = "#ee656c";
"themeSecondary" = "#e6242d";
"themeDarkAlt" = "#cc0812";
"themeDark" = "#ac070f";
"themeDarker" = "#7f050b";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#595959";
"neutralSecondary" = "#373737";
"neutralPrimaryAlt" = "#2f2f2f";
"neutralPrimary" = "#000000";
"neutralDark" = "#151515";
"black" = "#0b0b0b";
"white" = "#ffffff";
}

Apply your code to the PowerShell Script and Run Add-SPOTheme command in SharePoint Online PowerShell. Take my script below or see instructions from Microsoft Add-SPOTheme documentation.

$adminSiteUrl = "https://tenant-admin.sharepoint.com"
$themeName = "C Custom Theme"
$cred = Get-Credential
Connect-SPOService $adminSiteUrl -Credential $cred
$theme = @{
    "themePrimary" = "#e20a16";
    "themeLighterAlt" = "#fef4f5";
    "themeLighter" = "#fbd4d6";
    "themeLight" = "#f7b0b3";
    "themeTertiary" = "#ee656c";
    "themeSecondary" = "#e6242d";
    "themeDarkAlt" = "#cc0812";
    "themeDark" = "#ac070f";
    "themeDarker" = "#7f050b";
    "neutralLighterAlt" = "#f8f8f8";
    "neutralLighter" = "#f4f4f4";
    "neutralLight" = "#eaeaea";
    "neutralQuaternaryAlt" = "#dadada";
    "neutralQuaternary" = "#d0d0d0";
    "neutralTertiaryAlt" = "#c8c8c8";
    "neutralTertiary" = "#595959";
    "neutralSecondary" = "#373737";
    "neutralPrimaryAlt" = "#2f2f2f";
    "neutralPrimary" = "#000000";
    "neutralDark" = "#151515";
    "black" = "#0b0b0b";
    "white" = "#ffffff";
    }
Add-SPOTheme -Name $themeName -Palette $theme -IsInverted:$false

Change site theme in Hub site collection

After you Powershell command is successfully implemented, you should see your custom theme in Change the Look > Theme settings.

Custom Theme

Site theme will be inherited from the Root Hub Site to the associated Hub sites. That’s nice because you don’t need to change the Theme in every associated hub sites.

Our theme in use at Intranet Hub Root Site
Custom theme applied automatically in associated hub site

Conclusions

That was my post about the custom site themes in SharePoint Online.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s