Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
To ensure a cohesive and consistent user experience across SharePoint sites, property pane custom controls should adhere to the SharePoint Theme Framework. This framework aims to rationalize theming for transient surfaces like property panes, drawers, and dialogs.
The Philosophy
The core principle for Property Pane controls is simple: they should not use the custom site theme. Instead, these controls should always follow the DOM tree property pane theme, which is controlled internally by SharePoint.
This approach ensures that property panes remain consistent with the overall application chrome regardless of the specific site's branding.
Technical Implementation Requirements
Developers are encouraged to use Fluent UI v9 for all new custom controls. Fluent UI v9 can automatically detect and use the theme from the SharePoint property pane framework.
Note
Both Fluent UI v8 components and legacy v8 color tokens will use the site theme instead of the property pane theme, which can cause visual misalignment with other property pane controls and may lead to accessibility issues.
Fluent UI v9 Components
Fluent UI v9 components can automatically detect and use the theme from the SharePoint property pane framework, while Fluent UI v8 components can't.
You can explore the available components and their usage in the Fluent UI v9 Components Storybook. This resource provides interactive examples and documentation for all v9 controls.
Fluent UI v9 Design Tokens
Hardcoded hex values for colors (for example, #0078d4) should be avoided. Similarly, Legacy v8 color tokens (such as classes like ms-color-neutralPrimary or variables) should no longer be used, as they reflect the site theme and may cause accessibility issues. You should use Fluent UI v9 Design Tokens to handle theming logic. This ensures your control follows the theme from the SharePoint property pane framework.
If you have existing controls using v8 color tokens, you should update them to the corresponding v9 tokens. You can find the legacy-to-v9 mapping here: Fluent UI v8 to v9 Color Token Mapping.