Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

Apply Custom Theme On Modern SharePoint Sites

Introduction:
While browsing SharePoint sites on any device, organizations are very keen to have their own branding. Microsoft has introduced our custom branding to Modern SharePoint sites called Site Themes. The new Site theme experience allows site owners to apply themes to SharePoint sites.

Required:

  • SharePoint
  • Theme generator
  • SharePoint Online Management Shell

Solution:

Microsoft has provided Theme Generator to create our color theme. Theme Generator is an online application or tool which helps us to generate a color palette that we can deploy to our tenant as a site theme.

The tool allows us to select the primary theme color, body background color, and body text color. Once you are ready with your color selection, the Theme Generator offers you 3 options to download your theme.

  1. JSON
  2. SASS
  3. PowerShell

Follow the below steps to generate your theme.

  • Open the Theme Generator (https://developer.microsoft.com/en-us/fabric#/styles/themegenerator)
  • Select your colors for primary theme color, body background color, and body text color.
  • Once you are done with the color selection, the output section presents JSON, SASS, and PowerShell options to get the theme.
  • Select PowerShell option to get the theme deployed to SharePoint.

How To Deploy the Site Theme:

  • Below are a couple of prerequisites to install the theme to tenant

– SharePoint Online Management Tool.

– SharePoint Admin privileges.

  • Once you have the prerequisites met, follow the below steps:

– Open the SharePoint Online Management Shell.

– Connect to SharePoint tenant using the below command.

– Connect-SPOService -Url https://<tenan namet>-admin.sharepoint.com

– Create a PowerShell variable to hold the generated color pallet.

$ThemeName = @{
"themePrimary" = "#0078d7";
"themeLighterAlt" = "#eff6fc";
"themeLighter" = "#deecf9";
"themeLight" = "#c7e0f4";
"themeTertiary" = "#71afe5";
"themeSecondary" = "#2b88d8";
"themeDarkAlt" = "#106ebe";
"themeDark" = "#005a9e";
"themeDarker" = "#004578";
"neutralLighterAlt" = "#f8f8f8";
"neutralLighter" = "#f4f4f4";
"neutralLight" = "#eaeaea";
"neutralQuaternaryAlt" = "#dadada";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c8c8";
"neutralTertiary" = "#a4a4a9";
"neutralSecondary" = "#63636a";
"neutralPrimaryAlt" = "#3b3b3f";
"neutralPrimary" = "#333336";
"neutralDark" = "#202022";
"black" = "#1c1c1d";
"white" = "#ffffff";
"primaryBackground" = "#ffffff";
"primaryText" = "#333336";
"bodyBackground" = "#ffffff";
"bodyText" = "#333336";
"disabledBackground" = "#f4f4f4";
"disabledText" = "#c8c8c8";
}

– Run the below command to deploy the theme
Add-SPOTheme -Name “Theme Name” -Palette $ ThemeName -IsInverted $false –Overwrite

– Remove theme by using below command
Remove-SPOTheme -Identity ” Theme Name “

How to Apply the Site Theme:

  • Open SharePoint Modern site.
  • Click Settings menu.
  • Select change the look.
  • Select “Theme” and choose your custom theme.
  • Click Apply.

=====

Plus read

Cascading Dropdowns in PowerApps

Business Card Reader in Canvas Power Apps