Description
In this 11-minute developer-focused demo, Fabio Franzini shows 3 ways to change shading using the Fluent UI Theme variant inside a web part. 1) Use colors applied to the section where the web part is present, 2) Select color variations based on theme applied at Site level or 3) Apply variations set to the json of a custom theme, created through the Fluent UI Theme Designer tool. For all, change color variation from none, neutral, soft and strong. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 23, 2021.
Demo Presenter: Fabio Franzini | @franzinifabio
Supporting materials:
• Sample - React Fluent UI Theme Variant | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-fluentui-theme-variant
• PnP SPFx Controls - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls/
• Tools - @fluentui/scheme-utilities – npm | https://www.npmjs.com/package/@fluentui/scheme-utilities
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos