A while back I wrote about on how to use the theme slots in the SPFx projects through SASS. It allows you to write web parts that reflect the default theme colours of a site. Instead, using fixed colour values, you can use variables in the CSS code of your artefacts.
To make the overall process faster I recently released and NPM packages including all the SASS colours plus some extras.
How to install
Whenever you start a new SPFx project, you can add additional NPM packages afterwards. You can include libraries such as jQuery UI easily. The same approach can be used to add SASS variable to your program code.
To add my SPFx Office UI Fabric theme slot package merely execute the following command.
npm install --save-dev spfx-uifabric-themes
Through this command, my theme package gets added to the
node_modules folder, and a reference gets saved in the
After the installation, you are ready to use it in your code.
Import UI Fabric SASS variables
To make use of the colour variables in your SASS file just import the data stored in the installed node module.
// import spfx-uifabric-themes
// make use of theme primary color
background-color: $ms-themePrimary; // background will be set to theme Primary
The import statement on top acts like a references in other programming languages. In this case a file referenced out of the ‘./node_modules’ folder ist referenced. In SPFx the root folder of your project is the base folder of the build chain. In other words, this is much easier than navigating the folder structure up from the path where your SASS files are located.
The resulting CSS compiles then to the following code and is ready to get picked up by theming engine in SPFx.
background-color: "[theme:themePrimary, default:#0078d7]"
This small step allows you to create additional styles and designs that reflects the theme of any website the web part will be embedded.
Let us take a look at some results and how the default SPFx web part behaves when we only change the web part background. The web part on the default SPFX looks like as shown in the following screenshot.
The same web part embedded on the Office 365 workbench inside an red themed website. The overall design changes according to the primary theme colour.
Let us try another yellow themed web site. There the web part will be shown accordingly as a yellow box.
SPFx – SPFabricCore
It is a while back I release my npm project. Meanwhile, SPFx included the same method in special versions of Office UI Fabric. When a new project provisions the default web part code, a reference on top of the web parts SASS module file exists.
The style sheet code of the default web part even reuses variable such as theme colour tokens and font variables.
// Our button
// Primary Button
// Basic Button
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
padding: 0 16px;
margin: 0 4px;
It uses variables for example font sizes and font weight and is a good starting point at all.
In my NPM package, I also have included additional help for example to create message boxes.
If you have some additional useful ideas to include, please open a new GitHub issue on my Repo. You will also find there more information on how to use.
More to come soon.
- Use theme colors in your SharePoint Framework customizations
- How to use theme colours in SPFx web parts
- NPM package of spfx-uifabric-themes
- GitHub Repository of spfx-uifabric-themes