You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Professional developers need to be able to style their components so they look like the rest of the application they are included in. This is particularly true when modern theming is in effect for either a canvas app (via the [Modern controls and themes](../../maker/canvas-apps/controls/modern-controls/overview-modern-controls.md) feature) or model app (through the [new refreshed look](../../user/modern-fluent-design.md)). Utilizing modern theming, which is based on [Fluent UI React v9](https://react.fluentui.dev/), to style your component is the recommended way to get the best performance and theming experience for your component.
24
+
Developers need to be able to style their components so they look like the rest of the application they're included in. They can do this when modern theming is in effect for either a canvas app (via the [Modern controls and themes](../../maker/canvas-apps/controls/modern-controls/overview-modern-controls.md) feature) or model-driven app (through the [new refreshed look](../../user/modern-fluent-design.md)). Use modern theming, which is based on [Fluent UI React v9](https://react.fluentui.dev/), to style your component. This approach is recommended to get the best performance and theming experience for your component.
25
25
26
-
In this article, we will describe 4 different ways to apply modern theming to your component.
26
+
There are four different ways to apply modern theming to your component.
27
27
28
28
- Fluent v9 controls
29
29
- Fluent v8 controls
30
30
- Non-Fluent controls
31
31
- Custom theme providers
32
32
33
-
## Fluent UI v9 controls
34
33
35
-
Wrapping Fluent UI v9 controls as a component is the easiest way to utilize modern theming as the modern theme will be automatically applied to these controls. The only prerequisite is to ensure your component adds a dependency on the [React controls & platform libraries (Preview)](../../component-framework/react-controls-platform-libraries.md) as shown below. This allows your component to use the same React and Fluent libraries as the platform and therefore share the same React context through which the theme tokens are passed down to the component.
34
+
Wrapping Fluent UI v9 controls as a component is the easiest way to utilize modern theming because the modern theme is automatically applied to these controls. The only prerequisite is to ensure your component adds a dependency on the [React controls & platform libraries (Preview)](../../component-framework/react-controls-platform-libraries.md) as shown below. This approach allows your component to use the same React and Fluent libraries as the platform, and therefore share the same React context that passes the theme tokens down to the component.
36
35
37
36
```xml
38
37
<resources>
@@ -45,7 +44,7 @@ Wrapping Fluent UI v9 controls as a component is the easiest way to utilize mode
45
44
46
45
## Fluent UI v8 controls
47
46
48
-
When using Fluent UI v8 controls in your component, Fluent provides a migration path for applying v9 theme constructs. In particular, you can create a v8 theme based on v9 theme tokens using the `createV8Theme` function included in the [Fluent's v8 to v9 migration package](https://www.npmjs.com/package/@fluentui/react-migration-v8-v9)using the code pattern below.
47
+
Fluent provides a migration path for applying v9 theme constructs when you use Fluent UI v8 controls in your component. Use the `createV8Theme` function included in the [Fluent's v8 to v9 migration package](https://www.npmjs.com/package/@fluentui/react-migration-v8-v9)to create a v8 theme based on v9 theme tokens, as shown in the following example:
Components that are not using Fluent UIcan take a dependency directly on the v9 theme tokens available through the `fluentDesignLanguage` context parameter. This parameter provides access to all [theme](../reference/theming.md) tokens, allowing a component to reference any aspect of the theme to style itself.
59
+
If your component doesn't use Fluent UI, you can take a dependency directly on the v9 theme tokens available through the `fluentDesignLanguage` context parameter. Use this parameter to get access to all [theme](reference/theming.md) tokens so it can reference any aspect of the theme to style itself.
@@ -67,7 +66,7 @@ Components that are not using Fluent UI can take a dependency directly on the v9
67
66
68
67
## Custom theme providers
69
68
70
-
For components that require styling that is partially or completely different from the current theme of the app, developers can create your own `FluentProvider` and pass your own set of theme tokens to be uptaken by your component.
69
+
When your component requires styling that is different from the current theme of the app, create your own `FluentProvider` and pass your own set of theme tokens to be used by your component.
@@ -81,38 +80,40 @@ Examples for each of these use cases are available at [Modern Theming API contro
81
80
82
81
## FAQ
83
82
84
-
### Q: My control uses Fluent UI v9 and has a dependency on the platform libraries, but I do not want to utilize modern theming. How can I disable it for my component?
83
+
This section contains frequently asked questions. If you have a question about this feature, use the **Feedback** for **This page** button at the bottom of this page to create a GitHub issue.
85
84
86
-
A: There are two ways to accomplish this:
85
+
### Q: My control uses Fluent UI v9 and has a dependency on the platform libraries, but I don't want to utilize modern theming. How can I disable it for my component?
86
+
87
+
**A**: You can do this two different ways:
87
88
88
89
1. You can create your own component-level `FluentProvider`
89
90
90
-
```tsx
91
-
<FluentProvidertheme={customFluentV9Theme}>
92
-
{/* your control */}
93
-
</FluentProvider>
94
-
```
91
+
```tsx
92
+
<FluentProvidertheme={customFluentV9Theme}>
93
+
{/* your control */}
94
+
</FluentProvider>
95
+
```
95
96
96
-
2. You can wrap your control inside `IdPrefixContext.Provider` and set your own `idPrefix` value. This will prevent your component from getting theme tokens from the platform.
97
+
1. You can wrap your control inside `IdPrefixContext.Provider` and set your own `idPrefix` value. This prevents your component from getting theme tokens from the platform.
97
98
98
-
```tsx
99
-
<IdPrefixProvidervalue="custom-control-prefix">
100
-
<Labelweight="semibold">This label is not getting Modern Theming</Label>
101
-
</IdPrefixProvider>
102
-
```
99
+
```tsx
100
+
<IdPrefixProvidervalue="custom-control-prefix">
101
+
<Labelweight="semibold">This label is not getting Modern Theming</Label>
102
+
</IdPrefixProvider>
103
+
```
103
104
104
-
### Q: Some of my Fluent UI v9 controls are not getting styles
105
+
### Q: Some of my Fluent UI v9 controls aren't getting styles
105
106
106
-
A: Fluent v9 controls that rely on the React Portal will need to be rewrapped in the theme provider to ensure styling is properly applied. You can use `FluentProvider`.
107
+
**A**: Fluent v9 controls that rely on the React Portal need to be rewrapped in the theme provider to ensure styling is properly applied. You can use `FluentProvider`.
107
108
108
109
### Q: How can I check if modern theming is enabled
109
110
110
-
A: You can check if tokens are available: `context.fluentDesignLanguage?.tokenTheme`. Or in model-driven applications you can check app settings: `context.appSettings.getIsFluentThemingEnabled()`.
111
+
**A**: You can check if tokens are available: `context.fluentDesignLanguage?.tokenTheme`. Or in model-driven applications you can check app settings: `context.appSettings.getIsFluentThemingEnabled()`.
111
112
112
-
## Related topics
113
+
## Related articles
113
114
114
-
[Theming (Power Apps component framework API reference)](../component-framework/reference/theming.md)<br />
115
-
[Modern Theming API control](./sample-controls/modern-theming-api-control.md)
116
-
[Use modern themes in canvas apps (preview)](../../../maker/canvas-apps/controls/modern-controls/modern-theming)
115
+
[Theming (Power Apps component framework API reference)](../component-framework/reference/theming.md)
116
+
[Modern Theming API control](./sample-controls/modern-theming-api-control.md)
117
+
[Use modern themes in canvas apps (preview)](../../maker/canvas-apps/controls/modern-controls/modern-theming.md)
title: "Modern theming API component | Microsoft Docs"
3
-
description: "This sample component demonstrates various ways of utiliznig the modern theming API capabilities to style your component."
3
+
description: "This sample component demonstrates various ways to use the modern theming API capabilities to style your component."
4
4
author: lesyk
5
5
ms.author: vilesyk
6
6
ms.date: 03/12/2023
@@ -15,35 +15,43 @@ contributors:
15
15
16
16
# Implementing a modern theming API component
17
17
18
-
This sample component showcases a variety of use cases for utilizing the modern theming API capabilities to style your component based on the current theme used in your app. The imported components will adhere to the default Power Apps modern theme initially, until the you have [enabled modern controls and themes for your app](../../../powerapps/maker/canvas-apps/controls/modern-controls/overview-modern-controls.md#enable-modern-controls-and-themes-for-your-app) and [applied a modern theme](../../../maker/canvas-apps/controls/modern-controls/modern-theming#apply-modern-theme).
18
+
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](../../../powerapps/maker/canvas-apps/controls/modern-controls/overview-modern-controls.md#enable-modern-controls-and-themes-for-your-app) and [apply a modern theme](../../../maker/canvas-apps/controls/modern-controls/modern-theming#apply-modern-theme).
19
19
20
-
> [!div class="mx-imgBorder"] > ![Modern Theming API component](../media/modern-theming-api-control-blue.png"Modern Theming API component blue theme")
21
-
> [!div class="mx-imgBorder"] > ![Modern Theming API component](../media/modern-theming-api-control-red.png"Modern Theming API component red theme")
22
-
> [!div class="mx-imgBorder"] > ![Modern Theming API component](../media/modern-theming-api-control-green.png"Modern Theming API component gree theme")
20
+
:::row:::
21
+
:::column:::
22
+
:::image type="content" source="../media/modern-theming-api-control-blue.png" alt-text="Modern Theming API component blue theme":::
23
+
:::column-end:::
24
+
:::column:::
25
+
:::image type="content" source="../media/modern-theming-api-control-red.png" alt-text="Modern Theming API component red theme":::
26
+
:::column-end:::
27
+
:::column:::
28
+
:::image type="content" source="../media/modern-theming-api-control-green.png" alt-text="Modern Theming API component green theme":::
29
+
:::column-end:::
30
+
:::row-end:::
23
31
24
32
## Available for
25
33
26
34
Model-driven and canvas apps
27
35
28
36
## Code
29
37
30
-
The sample component illustrates four different examples consuming the Power Apps modern theming API.
38
+
The sample component demonstrates four different examples consuming the Power Apps modern theming API.
31
39
32
-
- Fluent v9 sample with automatic application of the current modern theme: [Automatic Modern Theming](../../component-framework/fluent-modern-theming.md#automatic-modern-theming)<br/>
33
-
- Fluent v8 sample styling itself by creating its own v8 ThemeProvider based on the v9 theme tokens passed via the PCF context parameters: [Modern Theming for Fluent UI v8 controls](../../component-framework/fluent-modern-theming.md#modern-theming-for-fluent-ui-v8-controls)<br/>
34
-
- Non-Fluent sample that applies styling to its HTML elements by directly referencing v9 theme tokens passed via the PCF context parameters: [Modern Theming for non-Fluent UI controls](../../component-framework/fluent-modern-theming.md#modern-theming-for-non-fluent-ui-controls)<br/>
35
-
- Fluent v9 sample creating its own custom v9 FluentProvider modifying the theme passed via the PCF context parameters. [Modern Theming via PCF context parameters](../../component-framework/fluent-modern-theming.md#modern-theming-via-pcf-context-parameters)<br/>
40
+
- Fluent v9 sample with automatic application of the current modern theme: [Automatic Modern Theming](../../component-framework/fluent-modern-theming.md#automatic-modern-theming)
41
+
- Fluent v8 sample styling itself by creating its own v8 ThemeProvider based on the v9 theme tokens passed via the PCF context parameters: [Modern Theming for Fluent UI v8 controls](../../component-framework/fluent-modern-theming.md#modern-theming-for-fluent-ui-v8-controls)
42
+
- Non-Fluent sample that applies styling to its HTML elements by directly referencing v9 theme tokens passed via the PCF context parameters: [Modern Theming for non-Fluent UI controls](../../component-framework/fluent-modern-theming.md#modern-theming-for-non-fluent-ui-controls)
43
+
- Fluent v9 sample creating its own custom v9 FluentProvider modifying the theme passed via the PCF context parameters. [Modern Theming via PCF context parameters](../../component-framework/fluent-modern-theming.md#modern-theming-via-pcf-context-parameters)
36
44
37
-
You can download the complete sample component from [here](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework/FluentThemingAPIControl).
45
+
You can download the sample component from [PowerApps-Samples/component-framework/FluentThemingAPIControl](https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework/FluentThemingAPIControl).
0 commit comments