How use SharePoint theme color in SCSS in SPFx

Introduction:

In this blog, we will learn how can we use the color of 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 now we can use theme color in SCSS. Hope this blog will be helpful for you!

If you have any questions you can reach out our SharePoint Consulting team here.