How to Create and Add a custom theme in SharePoint Online Modern page

In this tutorial, we will discuss on custom theme in SharePoint Online. How to add custom a theme in SharePoint Online modern page. We will see how to create your custom theme and use your custom theme in your modern SharePoint site.

Microsoft provided an excellent feature in the SharePoint communication site or hub site to select the default theme in the site or create your own custom theme.

Create a custom theme in SharePoint Online

Here we will discuss how to create a custom theme in SharePoint Online.

Step 1: Microsoft provided a theme builder where we can design our theme as per the requirement and we can visualize the theme. Please click on the below link to create your own theme.

• https://developer.microsoft.com/en-us/fluentui#/styles/themegenerator?fabricVer=5

Step 2: Once you open this builder, you can able to design your theme.

Step 3: Once you have created your theme, you have to add this theme using the SharePoint Online management shell.

Make sure that you have the latest version of the SharePoint Online Management Shell.

First of all you need to connect to your SPO tenant using below command

Connect-SPOService -Url https://pikasha12-admin.sharepoint.com/ -credential [email protected]

Step 4: Next copy your code which you have created and added it in management shell using below command.

PS C:\WINDOWS\system32> $builder = @{
>>   "themePrimary" = "#00ffff";
>>   "themeLighterAlt" = "#f3fcfc";
>>   "themeLighter" = "#daffff";
>>   "themeLight" = "#affefe";
>>   "themeTertiary" = "#76ffff";
>>   "themeSecondary" = "#39ffff";
>>   "themeDarkAlt" = "#00c4c4";
>>   "themeDark" = "#009090";
>>   "themeDarker" = "#005252";
>>   "neutralLighterAlt" = "#f8f8f8";
>>   "neutralLighter" = "#f4f4f4";
>>   "neutralLight" = "#eaeaea";
>>   "neutralQuaternaryAlt" = "#dadada";
>>   "neutralQuaternary" = "#d0d0d0";
>>   "neutralTertiaryAlt" = "#c8c8c8";
>>   "neutralTertiary" = "#a6a6a6";
>>   "neutralSecondaryAlt" = "#767676";
>>   "neutralSecondary" = "#666666";
>>   "neutralPrimary" = "#333";
>>   "neutralPrimaryAlt" = "#3c3c3c";
>>   "neutralDark" = "#212121";
>>   "black" = "#000000";
>>   "white" = "#fff";
>>   "primaryBackground" = "#fff";
>>   "primaryText" = "#333"
>>  }
PS C:\WINDOWS\system32> $theme = New-Object "System.Collections.Generic.Dictionary``2[System.String,System.String]"
>>
PS C:\WINDOWS\system32> $builder.Keys | %{$theme.Add($_, $builder[$_])}
>>
PS C:\WINDOWS\system32> Add-SPOTheme -Name "Contoso Purple" -Palette $theme -IsInverted:$false
>>
PS C:\WINDOWS\system32> Add-SPOTheme -Name "Raj Custom Theme" -Palette $theme -IsInverted:$false

Next click on enter to execute this script. Once it executed successfully, make sure that your custom theme got successfully created. Login to the site and check, its created or not.

Step 5: Next go the SharePoint modern page and go to the theme section and see my newly created theme is appearing over here.

This is the way to create a custom theme in SharePoint modern site collection.

Note: Command for hide default theme in SharePoint Online

Set-HideDefaultThemes -HideDefaultThemes:$true

If you want the default ones back you just fire off this:

Set-HideDefaultThemes -HideDefaultThemes:$false

You may like following SharePoint tutorials:

• How to get Office 365 Groups using Microsoft Graph API
• How to get logged in user count in SharePoint
• Add Modern SharePoint Site Page in Microsoft Teams
• How to change Microsoft Teams Background
• Share blog posts on Twitter and LinkedIn using Power Automate or MS Flow
• SharePoint online spfx script editor web part
• How to get the total number of users from SharePoint group using JSOM
• How to Create a Tiles View using SharePoint Online modern list view customization
• How to remove SharePoint Online Modern Page Title using PowerShell

These are the steps to create your custom theme in SharePoint Online that will make it easier to have a consistent look and feel in all your Modern SharePoint sites.