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.

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!

This blog is part of SharePoint Week. Find more here.

About the Author:

Lead SharePoint Developer | I am Sanjay Makwana. I have 5+ years of experience in SharePoint i.e. SPFx, SharePoint Online, SharePoint On Premises, MS Flow, SPD Workflows, Nintex workflows, Office 365, MS Teams custom apps, etc.

Reference: