How to add theme colour by using sharepoint framework in sharepoint sites?

Question

Hi,

I want to add theme colour in sharepoint online site. Can you please help to do where I have to add the code and what exactly need to add. I found this blog https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/index.html related to the add theme. So how can we use can you please help me on this.

Thanks!

Answer 1

Here are steps:

1.Open the Fluent Theme Designer app.

2.Modify the Primary color, Text color, and Background color values.

3.In the upper-right corner, select Export theme to generate the PowerShell of customized theme.

4.Connect to your SharePoint tenant with PowerShell.

Connect-SPOService -Url https://tenant-admin.sharepoint.com

5.Upload the customized theme in to SharePoint.

$themepalette =@{
"themePrimary" = "#0078d4";
"themeLighterAlt" = "#eff6fc";
"themeLighter" = "#deecf9";
"themeLight" = "#c7e0f4";
"themeTertiary" = "#71afe5";
"themeSecondary" = "#2b88d8";
"themeDarkAlt" = "#106ebe";
"themeDark" = "#005a9e";
"themeDarker" = "#004578";
"neutralLighterAlt" = "#faf9f8";
"neutralLighter" = "#f3f2f1";
"neutralLight" = "#edebe9";
"neutralQuaternaryAlt" = "#e1dfdd";
"neutralQuaternary" = "#d0d0d0";
"neutralTertiaryAlt" = "#c8c6c4";
"neutralTertiary" = "#a19f9d";
"neutralSecondary" = "#605e5c";
"neutralPrimaryAlt" = "#3b3a39";
"neutralPrimary" = "#323130";
"neutralDark" = "#201f1e";
"black" = "#000000";
"white" = "#ffffff";
}
Add-SPOTheme -Identity “MyTheme” -Palette $themepalette -IsInverted $false

6.Open a site -> Click the gear icon in the top right corner -> Change the look -> Theme -> Choose the customized theme.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.