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

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

No comments

 427 total views,  7 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"

Create SPFx solution (SPFx Scaffolding process)

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
Create SPFx solution (SPFx Scaffolding process) pass input parameters
Create SPFx solution (SPFx Scaffolding process) pass input parameters

Wait for a few minutes !!!

After sometimes, the projected scaffolding process will be completed.

Create SPFx solution (SPFx Scaffolding process completed)

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

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.

Get SharePoint Online Site Theme Color
Get SharePoint Online Site Theme Color

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

Launch SPFx web part in SharePoint Online workbench - Default web part background color
Launch SPFx web part in SharePoint Online workbench – Default web part background-color

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

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

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]”;

Set SPFx web part background color as site theme color using CSS background-color attribute
Set SPFx web part background color as site theme color using CSS background-color attribute
.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

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.

Verification - web part background color has been changed to site theme color in SPFx
Verification – web part background color has been changed to site theme color in SPFx

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:

Free download SharePoint Online & Office 365 Administration eBook(238 Pages)

Get the PDF eBook from here:


[purchase_link id="0" style="button" color="blue" text="Free Download SharePoint Online & Office 365 Administration"]

 

 
FREE DOWNLOAD

Send download link to:

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