{"kind":"AgentDefinition","metadata":{"namespace":"community","name":"pcf-fluent-modern-theming","version":"0.1.0"},"spec":{"agents_md":"---\ndescription: 'Style components with modern theming using Fluent UI'\napplyTo: '**/*.{ts,tsx,js,json,xml,pcfproj,csproj}'\n---\n\n# Style Components with Modern Theming (Preview)\n\n[This topic is pre-release documentation and is subject to change.]\n\nDevelopers 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](https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/overview-modern-controls) feature) or model-driven app (through the [new refreshed look](https://learn.microsoft.com/en-us/power-apps/user/modern-fluent-design)).\n\nUse 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.\n\n## Four Ways to Apply Modern Theming\n\n1. **Fluent UI v9 controls**\n2. **Fluent UI v8 controls**\n3. **Non-Fluent UI controls**\n4. **Custom theme providers**\n\n## Fluent UI v9 Controls\n\nWrapping 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 \u0026 platform libraries](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries).\n\nThis 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.\n\n```xml\n\u003cresources\u003e\n  \u003ccode path=\"index.ts\" order=\"1\"/\u003e\n  \u003c!-- Dependency on React controls \u0026 platform libraries --\u003e\n  \u003cplatform-library name=\"React\" version=\"16.14.0\" /\u003e\n  \u003cplatform-library name=\"Fluent\" version=\"9.46.2\" /\u003e\n\u003c/resources\u003e\n```\n\n## Fluent UI v8 Controls\n\nFluent 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:\n\n```typescript\nconst theme = createV8Theme(\n  context.fluentDesignLanguage.brand,\n  context.fluentDesignLanguage.theme\n);\nreturn \u003cThemeProvider theme={theme}\u003e\u003c/ThemeProvider\u003e;\n```\n\n## Non-Fluent UI Controls\n\nIf 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](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/theming) tokens so it can reference any aspect of the theme to style itself.\n\n```typescript\n\u003cspan style={{ fontSize: context.fluentDesignLanguage.theme.fontSizeBase300 }}\u003e\n  {\"Stylizing HTML with platform provided theme.\"}\n\u003c/span\u003e\n```\n\n## Custom Theme Providers\n\nWhen 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.\n\n```typescript\n\u003cFluentProvider theme={context.fluentDesignLanguage.tokenTheme}\u003e\n  {/* your control */}\n\u003c/FluentProvider\u003e\n```\n\n## Sample Controls\n\nExamples for each of these use cases are available at [Modern Theming API control](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/sample-controls/modern-theming-api-control).\n\n## FAQ\n\n### 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?\n\nA: You can do this two different ways:\n\n**Option 1**: Create your own component-level `FluentProvider`\n\n```typescript\n\u003cFluentProvider theme={customFluentV9Theme}\u003e\n  {/* your control */}\n\u003c/FluentProvider\u003e\n```\n\n**Option 2**: Wrap your control inside `IdPrefixContext.Provider` and set your own `idPrefix` value. This prevents your component from getting theme tokens from the platform.\n\n```typescript\n\u003cIdPrefixProvider value=\"custom-control-prefix\"\u003e\n  \u003cLabel weight=\"semibold\"\u003eThis label is not getting Modern Theming\u003c/Label\u003e\n\u003c/IdPrefixProvider\u003e\n```\n\n### Q: Some of my Fluent UI v9 controls aren't getting styles\n\nA: 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`.\n\n### Q: How can I check if modern theming is enabled?\n\nA: You can check if tokens are available: `context.fluentDesignLanguage?.tokenTheme`. Or in model-driven applications you can check app settings: `context.appSettings.getIsFluentThemingEnabled()`.\n\n## Related Articles\n\n- [Theming (Power Apps component framework API reference)](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/theming)\n- [Modern Theming API control](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/sample-controls/modern-theming-api-control)\n- [Use modern themes in canvas apps (preview)](https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/modern-controls/modern-theming)\n","description":"Style components with modern theming using Fluent UI","import":{"commit_sha":"541b7819d8c3545c6df122491af4fa1eae415779","imported_at":"2026-05-18T20:05:35Z","license_text":"MIT License\n\nCopyright GitHub, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","owner":"github","repo":"github/awesome-copilot","source_url":"https://github.com/github/awesome-copilot/blob/541b7819d8c3545c6df122491af4fa1eae415779/instructions/pcf-fluent-modern-theming.instructions.md"},"manifest":{}},"content_hash":[28,207,136,34,245,144,26,35,240,49,164,101,102,243,163,143,33,140,34,35,223,158,206,139,234,78,94,241,28,0,156,75],"trust_level":"unsigned","yanked":false}