4: Create your own theme for SharePoint Branding using PowerShell

Before we developed customized footer with social media links using spfx application Customizer.

But now we are going to change over all color theme of site collection.

Like if you want to change the look and feel of buttons and banners of complete site collection. For classic SharePoint sites we have to write feature stapling feature to apply changes via CSS and color palette.

4.1: Introduction of Theme Generator:

But for SharePoint online Microsoft introduced “Theme Generator”

Using Theme Generator, you can create your own color palette, change background color and button colors. You can deploy this on a tenant as a theme.

Steps to generate Theme:

1: Visit this URL: https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/index.html

A: Select the colors as per your company branding
B: Live changes the colors you will select C: Once you done with your changes just click on Export Theme Button

2:Export theme have following formats to download your theme and install the way you want:

A: Available formats to save your color palette (Code, JSON, PowerShell)
B: Copy this    

@{

"themePrimary" = "#63051f";

"themeLighterAlt" = "#040001";

"themeLighter" = "#100105";

"themeLight" = "#1e010a";

"themeTertiary" = "#3c0313";

"themeSecondary" = "#58041c";

"themeDarkAlt" = "#73112d";

"themeDark" = "#892642";

"themeDarker" = "#a84f68";

"neutralLighterAlt" = "#f3eeec";

"neutralLighter" = "#efeae8";

"neutralLight" = "#e5e1df";

"neutralQuaternaryAlt" = "#d6d1cf";

"neutralQuaternary" = "#ccc8c6";

"neutralTertiaryAlt" = "#c4c0be";

"neutralTertiary" = "#abd6a8";

"neutralSecondary" = "#67ac62";

"neutralPrimaryAlt" = "#378631";

"neutralPrimary" = "#267521";

"neutralDark" = "#1d5919";

"black" = "#164212";

"white" = "#faf5f2";

}

4.2: Deployment of Theme

1: Install above created theme, I am using PowerShell to Deploy theme
Open SharePoint Online Management Shell run as administrator, if you don’t have download using this Link: https://www.microsoft.com/en-us/download/details.aspx?id=35588

2: Connect to SharePoint tenant where you want to install your theme:
Command: Connect-SPOService -Url https://<tenant>-admin.sharepoint.com
Example: 

3: Enter then enter your credentials:

4: Create a PowerShell variable to contain your customized theme like below:

$      YourTheme = @{ 

"themePrimary" = "#63051f";

"themeLighterAlt" = "#040001";

"themeLighter" = "#100105";

"themeLight" = "#1e010a";

"themeTertiary" = "#3c0313";

"themeSecondary" = "#58041c";

"themeDarkAlt" = "#73112d";

"themeDark" = "#892642";

"themeDarker" = "#a84f68";

"neutralLighterAlt" = "#f3eeec";

"neutralLighter" = "#efeae8";

"neutralLight" = "#e5e1df";

"neutralQuaternaryAlt" = "#d6d1cf";

"neutralQuaternary" = "#ccc8c6";

"neutralTertiaryAlt" = "#c4c0be";

"neutralTertiary" = "#abd6a8";

"neutralSecondary" = "#67ac62";

"neutralPrimaryAlt" = "#378631";

"neutralPrimary" = "#267521";

"neutralDark" = "#1d5919";

"black" = "#164212";

"white" = "#faf5f2";

}  

6: Finally run this command:
Add-SPOTheme -Name "BaseBallField" -Palette $YourTheme -IsInverted $false –Overwrite

4.3: Installation of Theme

1: Open your SharePoint site where you want to install theme and go to change the look

2: Click on theme your newly created theme should be there and click on Save:

3: Your Changes:

4.4: Final Looks

Let’s make it more meaningful by using change look option

Next 5: Inject External CSS in Modern UI

Thanks Best Of Luck. If you stuck somewhere please feel free to ask in Comment. #SharingIsCaring