| title | description | author | ms.author | ms.date | ms.reviewer | ms.topic | ms.subservice | search.audienceType | contributors | ||
|---|---|---|---|---|---|---|---|---|---|---|---|
Modern theming API component | Microsoft Docs |
This sample component demonstrates various ways to use the modern theming API capabilities to style your component. |
lesyk |
vilesyk |
03/12/2023 |
jdaly |
sample |
pcf |
|
|
This sample component shows use cases to use the modern theming API capabilities to style your component based on the current theme used in your app. The imported components adhere to the default Power Apps modern theme initially, until you enable modern controls and themes for your app and apply a modern theme.
:::row::: :::column::: :::image type="content" source="../media/modern-theming-api-control-blue.png" alt-text="Modern Theming API component blue theme"::: :::column-end::: :::column::: :::image type="content" source="../media/modern-theming-api-control-red.png" alt-text="Modern Theming API component red theme"::: :::column-end::: :::column::: :::image type="content" source="../media/modern-theming-api-control-green.png" alt-text="Modern Theming API component green theme"::: :::column-end::: :::row-end:::
Model-driven and canvas apps
The sample component demonstrates four different examples consuming the Power Apps modern theming API.
- Fluent v9 sample with automatic application of the current modern theme: Fluent UI v9 controls
- Fluent v8 sample styling itself by creating its own v8 ThemeProvider based on the v9 theme tokens passed via the PCF context parameters: Fluent UI v8 controls
- Non-Fluent sample that applies styling to its HTML elements by directly referencing v9 theme tokens passed via the PCF context parameters: Non-Fluent UI controls
- Fluent v9 sample creating its own custom v9 FluentProvider modifying the theme passed via the PCF context parameters. Custom theme providers
You can download the sample component from PowerApps-Samples/component-framework/FluentThemingAPIControl.
Download sample components
How to use the sample components
Power Apps component framework API reference
Style components with modern theming (Preview)
Theming reference
Use modern themes in canvas apps (preview)
Overview of modern controls and themes in canvas apps
[!INCLUDEfooter-include]