How To Use SharePoint Theme Color In SCSS In SPFx

In this blog we will learn how can we use SharePoint theme color SCSS in SPFx Web part or SPFx Extension

Introduction

In this blog, we will learn how can we use the color of the current applied theme in SharePoint in SPFx web parts or SPFx extension.

Steps

Step 1

Go to the SCSS file of your web part or extension.

Step 2

Now at the top of the SCSS file, declare the variables and assign the theme color as a value to this variable as given below:

$themePrimary: '[theme:themePrimary, default:#dc1928]';
$themeSecondary: '[theme:themeSecondary, default:#2488d8]';
$themeTertiary: "[theme:themeTertiary, default:#69afe5]";
$themeLight: "[theme:themeLight, default:#b3d6f2]";
$themeAccent: "[theme:themeAccent, default:inherit]";
$themeDark: "[theme:themeDark, default:#005a9e]";
$themeDarkAlt: "[theme:themeDarkAlt, default:#106ebe]";
$themeDarker: "[theme:themeDarker, default:#004578]"; 

Here we are creating the variables for all the colors of the theme, so we can use directly the variables.

Step 3

Now, add the class name in which you want to apply the color of the theme and in this class name we can use the variable names we have declared at the top of SCSS file.

.menuButton{
    background-color: $themePrimary;
} 

Step 4

Now, when you use menuButton class in your HTML it will apply the primary color of your selected theme as the background color.

Alternate Approach

If you do not want to use variables, you can also apply theme color direct to the class as given below:

.menuButton{
    background-color: "[theme:themePrimary, default:#dc1928]";
} 

Conclusion

This is how we can use theme color in SCSS. Hope this blog will be helpful for you!