During last weekend I already teased a web part named ‘Panthema’. I was a bit surprised by the interest in this helpful tool for developer, consultant and everyone who has to manage themes in SharePoint on Office 365. I also think it helps a lot in debugging the colours used.
Once a wise man cited a wiser woman with the following statement:
“My mom always said life was like a box of chocolates. You never know what you’re gonna get. – Forest Gump”.
This quote can be applied to SharePoint in Office 365 nowadays too. When you have a provisioned classic site or even a modern site, then you never know what primary colour you get as your default theme.
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.
While Waldek Mastykarz and I were working on a new project, we ask ourselves what it needs to create the web part corresponding to the current site theme colors.
After a small research, we found the solution for that.