Best way to customize SharePoint theme colors: Use theme color in SharePoint SPFx framework web part – O365

In this Customize SharePoint theme colors (SPFx theme colors) tutorial, we will learn how to customize theme color in the SharePoint SPFx framework web part.

Key-Highlights: Customize SharePoint theme colors (SPFx theme colors)

• Create SPFx solution (SPFx Scaffolding process)
• Launch SPFx web part in SharePoint Online workbench
• Make changes in the CSS classes (.row and .button)
• Uses of background-color: “[theme: themeDark, default: #005a9e]”;
• Uses of background-color: “[theme: themePrimary, default: #0078d7]”;
• Uses of border-color: “[theme: themePrimary, default: #0078d7]”;
• Verification – web part background color has been changed to site theme color in SPFx

SharePoint theme colors: Create SPFx solution (SPFx Scaffolding process)

Create a new folder in the specific project directory using this command

md "Use_Site_Theme_Colors_SPFx"

Then, change the directory to the newly created folder using the below command:

cd "Use_Site_Theme_Colors_SPFx"

Then run the below Yeoman SharePoint Generator command to create the SPFx solution:

yo @microsoft/sharepoint

Then complete the below questionaries (below bolds are marked as answer):

Let's create a new SharePoint solution.
? What is your solution name? use-site-theme-colors-sp-fx
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found npm version 6.14.7
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without
 running any feature deployment or adding apps in sites? No
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other c
omponents in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution use-site-theme-colors-sp-fx.
? What is your Web part name? use-site-theme-colors-sp-fx
? What is your Web part description? use-site-theme-colors-sp-fx description
? Which framework would you like to use?
  No JavaScript framework
> React
  Knockout

Wait for a few minutes !!!

After some time, the projected scaffolding process will be completed.

Now, run the Gulp build command to see whether the solution got created without any errors.

We can see gulp build command running status is successful.

Now, let’s run the gulp serve command.

Launch SPFx web part in SharePoint Online workbench (Customize SharePoint theme colors)

Add this web part to the SharePoint online page using the below URL:

https://globalsharepoint2020.sharepoint.com/sites/allcompany/_layouts/15/workbench.aspx#

In the below screenshot, the current site theme color is shown. In this demo, we will make this theme color in our web part background.

Launch SPFx web part in SharePoint Online workbench – Default web part background color is shown as below:

Open SPFx project solution in visual studio editor using the code dot (code .)

Using the below CSS code we can make the web part background color as the site theme color:

.button { 
background-color: "[theme: themePrimary, default: #0078d7]";

border-color: "[theme: themePrimary, default: #0078d7]";

 
}

Now, let’s learn where to inject this line of code.

Open the “UseSiteThemeColorsSpFx.module.scss” file from \src\webparts\UseSiteThemeColorsSpFx\

Make the below-higlighted changes in the CSS classes:SPFx theme colors

Make changes in the .row class:

Add this line of code into this class – background-color: “[theme: themeDark, default: #005a9e]”;

.row {

    @include ms-Grid-row;

    @include ms-fontColor-white;

    //background-color: $ms-color-themeDark;

    padding: 20px;     

    background-color: "[theme: themeDark, default: #005a9e]"; 

  }

Make changes in the .button class:

Add these two lines of code into this class:

 background-color: "[theme: themePrimary, default: #0078d7]";  

 border-color: "[theme: themePrimary, default: #0078d7]";

Set SPFx web part background color as site theme color using CSS

.button

   {

    // Our button

    text-decoration: none;

    height: 32px;

    // Primary Button

    min-width: 80px;

    //background-color: $ms-color-themePrimary;

    //border-color: $ms-color-themePrimary;

    color: $ms-color-white;

    background-color: "[theme: themePrimary, default: #0078d7]";  

    border-color: "[theme: themePrimary, default: #0078d7]"; 

    // Basic Button

    outline: transparent;

    position: relative;

    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;

    -webkit-font-smoothing: antialiased;

    font-size: $ms-font-size-m;

    font-weight: $ms-font-weight-regular;

    border-width: 0;

    text-align: center;

    cursor: pointer;

    display: inline-block;

    padding: 0 16px;

    .label {

      font-weight: $ms-font-weight-semibold;

      font-size: $ms-font-size-m;

      height: 32px;

      line-height: 32px;

      margin: 0 4px;

      vertical-align: top;

      display: inline-block;

    }

  }

Verification (SPFx theme colors) – web part background color has been changed to the site theme color in SPFx

Now, let’s open the below URL in the browser.

https://globalsharepoint2020.sharepoint.com/sites/allcompany/_layouts/15/workbench.aspx# 

Add the web part to the workbench page.

We can see that the SPFx web part background, as well as border color, has been changed to the site theme color.

Notes:

• Here in this example, the site theme color is visible on the workbench page, if we want to see the site theme color we need to go to the said site pages which we have seen in the “Launch SPFx web part in SharePoint Online workbench” section.

Summary: Customize SharePoint theme colors (SPFx theme colors)

Thus in this article, we have learned the below with respect to customizing the SPFx web part color to the site theme color:

• Create SPFx solution (SPFx Scaffolding process)
• Launch SPFx web part in SharePoint Online workbench
• Make changes in the CSS classes (.row and .button)
• Verification – web part background color has been changed to site theme color in SPFx
• Uses of background-color: “[theme: themeDark, default: #005a9e]”;
• Uses of background-color: “[theme: themePrimary, default: #0078d7]”;
• Uses of border-color: “[theme: themePrimary, default: #0078d7]”;

See Also: SharePoint framework tutorial step by step

You may also like the below SharePoint SPFx articles:

• SharePoint Online: CRUD operations using SPFx ReactJS framework
• SharePoint Online: CRUD operations using SPFx no javascript framework
• Develop your first hello world web part in sharepoint framework (SPFx)
• Understanding solution structure in SharePoint framework (SPFx)
• Create custom property in SharePoint Framework – SPFx web part pane
• Get list items from SharePoint using SPFx framework(No Javascript Framework)
• Custom search result page in SharePoint Online – SPFx PnP Modern Search solution
• Build your first SharePoint client-side web part (Hello World part 1)

Download SharePoint Online & Office 365 Administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:

 

Get the free demo PDF eBook from here:

FREE DOWNLOAD

Send download link to:

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.

About Post Author

SP Doctor

Your SharePoint and Power Platform Doctor and Guide, sharing expertise that unlocks the true potential of the Microsoft 365 ecosystem.

See author's posts