Often you can have a task where your custom web part style (colors, backgrounds) should change to fit current selected SharePoint Theme (Site Settings -> Change the look).
I have good news for you - it's really simple to implement in SPFx Client Side Web Part
It turns out that SPFx has out of the box 'Themes loader' that is loaded to all Modern Pages by default. And this loader can replace SASS variables of specific format with values from current theme.
All existing theme properties can be found in window object:
- theme:primaryBackground shows what variable from theme to use
- default shows what value to use if the theme variable is not set (for example, default Office theme has very few variables that are set)
I've decided to list all the theme's properties here and start to collect information what property is responsible for what elements of the UI as I didn't find any documentation on that.
|Elements on Modern Page
Please, feel free to add information about the properties in the comments. I will update the table with this info.