SharePoint Online: Use theme color in SharePoint SPFx framework web part

 10,842 total views,  58 views today

In this tutorial, we will learn how to use site theme color in SharePoint online SPFx framework web part.

Key-Highlights:

• 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

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 sometimes, 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

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

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

In the below screenshot 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 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:

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 – web part background color has been changed to 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 workbench page.

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

Notes:

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

Summary:

Thus in this article, we have learned the below with respect to changing the SPFx web part color to 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

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

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.