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

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

One comment

Loading

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"
SharePoint theme colors (SPFx theme colors)
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
SharePoint theme colors (SPFx theme colors), create SPFx solution (SPFx Scaffolding process) pass input parameters
Create SPFx solution (SPFx Scaffolding process) pass input parameters

Wait for a few minutes !!!

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

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

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

SharePoint theme colors (SPFx theme colors), 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.

SharePoint theme colors (SPFx theme colors), 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:

SharePoint theme colors (SPFx theme colors), 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 .)

SharePoint theme colors (SPFx theme colors), 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 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]”;

SharePoint theme colors (SPFx theme colors), 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]";

SharePoint theme colors (SPFx theme colors), 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 (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.

SharePoint theme colors (SPFx theme colors), 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 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:

Download SharePoint Online PDF Book

Download SharePoint Online & Office 365 Administration eBook

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



Buy SharePoint Online & Office 365 Administration eBook


 

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

1 comments on “Best way to customize SharePoint theme colors: Use theme color in SharePoint SPFx framework web part – O365”

Do you have a better solution or question on this topic? Please leave a comment