--- source_url: https://itmustbecode.com/how-to-get-pcf-controls-ready-for-dark-mode-in-model-driven-apps/ title: How to Get PCF Controls Ready for Dark Mode in Model-Driven Apps date: 2024-04-05T04:03:22+00:00 categories: - blog tags: - fluentui - pcf - react word_count: 589 reading_time_minutes: 3 type: posts --- Although not officially released, there are strong signals that the support for **Dark mode** 🌚 is coming very soon to Power Platform Model-Driven apps. Recent investments made in the platform like the ' **New look**' that leverages the Fluent 2 design system are paving the way to Dark Mode. > 🔗 [Adapting PCF Controls for Model Driven apps New (Modern) Look](/adapting-pcf-controls-for-model-driven-apps-new-modern-look/) > > 🔗 [Modern, refreshed look for model-driven apps - Power Apps \| Microsoft Learn](https://learn.microsoft.com/en-us/power-apps/user/modern-fluent-design?WT.mc_id=DX-MVP-5004959) While we wait for an official Dark Mode toggle, thanks to **[Andrew Butenko](https://www.linkedin.com/in/andriibutenko/)** ( _...whom I finally had the chance to meet at the last MVP Summit_ 😎🍺) we now have a way switch to dark mode by adding the following snippet to the URL of a Model-Driven app. ``` &flags=themeOption%3Ddarkmode ``` {{< linkcard url="https://www.linkedin.com/feed/update/urn:li:activity:7179580229424742400/?commentUrn=urn%3Ali%3Acomment%3A(activity%3A7179580229424742400%2C7181288604868956162)&dashCommentUrn=urn%3Ali%3Afsd_comment%3A(7181288604868956162%2Curn%3Ali%3Aactivity%3A7179580229424742400)" title="MDA dark theme in #Dynamics365 | Andrew Butenko posted on the topic | LinkedIn" summary="Did you know that a dark theme is available in #MDA? I did not. To check it out turn on \"New Look\" and add the e following text to the URL -… | 19 comments on LinkedIn" image="https://media.licdn.com/dms/image/D5622AQFERHgDoLGQBQ/feedshare-shrink_800/0/1711745315603?e=2147483647&v=beta&t=ujRS3Usav15Gvvkfw_IYvqUEeQp3JR4M6kPXqWmUx6s" domain="www.linkedin.com" new_tab="true" nofollow="true" >}} The end result is pretty neat, despite some noticeable icons rendering issues, and I will probably use Dark Mode by default after official release. ## But what about PCF Controls ? However, as a PCF control author, I'm always very eager each time that there is a new feature that affects the UI of the platform. It often means that I will have to go back to the drawing board and adapt my controls for the new kid in town. And as a matter of fact, that is exactly what happens with the Dark Mode switched on. You can see that the PCF controls are still rendering like they do in light mode ... How would they know. Here's an example of my latest community PCF control, the [**FluentUI Month Picker**](https://pcf.gallery/fluentui-month-picker/) {{< figure src="./image-3.png" alt="" caption="" >}} ## How to detect Dark mode at runtime ? Fortunately, it is quite trivial to detect if a PCF control should render in Dark mode or not. By inspecting the **context** object received by the PCF control at runtime, we can see that **_context_.fluentDesignLanguage.isDarkTheme** property will give us the answer. {{< figure src="./image.png" alt="" caption="" >}} After that its a matter of rendering the control with a Dark or Light theme depending on that value. {{< figure src="./image-1.png" alt="" caption="" >}} 🎯 **Bonus point** if you've already started to use **[FluentUI v9](https://react.fluentui.dev/?path=/docs/concepts-introduction--page)** to develop your controls. Since the theme is injected at the very root of the control in the **FluentProvider**, just provide **webDarkTheme** or **webLightTheme** accordingly and there is nothing else to do. > _Note that these are the exact same themes used by the platform so your controls have a better chance to **blend perfectly** with the rest of the form._ > > More on theming :🔗 [Concepts / Developer / Theming - Page ⋅ Storybook (fluentui.dev)](https://react.fluentui.dev/?path=/docs/concepts-developer-theming--page) {{< figure src="./image-2.png" alt="" caption="" >}} Now as expected, the control will render with the right theme depending on the users display preferences... it's that easy. {{< figure src="./image-5.png" alt="" caption="" >}} Using this technique we can future-proof PCF controls and make them Dark Mode aware ahead of time. Hope this helps! ## Links {{< linkcard url="https://pcf.gallery/fluentui-month-picker/" title="FluentUI Month Picker" summary="A control to select a month and optionally outputs some information about the selected month (ex. month number, number of days in month)." image="/linkcards/c589a7a12cf0f894.png" domain="pcf.gallery" new_tab="true" nofollow="true" >}} {{< linkcard url="https://learn.microsoft.com/en-us/power-apps/user/modern-fluent-design?WT.mc_id=DX-MVP-5004959" title="Modern, refreshed look for model-driven apps - Power Apps" summary="Learn about the updated, user interface that makes model-driven apps easier to use." image="/linkcards/4fac7452f522bab5.png" domain="learn.microsoft.com" new_tab="true" nofollow="true" >}} {{< linkcard url="https://react.fluentui.dev/?path=/docs/concepts-introduction--page" title="Fluent UI React" summary="Fluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: @fluentui/react and @fluentui/react-northstar." image="/linkcards/00c9cfc191a4eacb.png" domain="react.fluentui.dev" new_tab="true" nofollow="true" >}} Image by [Enrique](https://pixabay.com/users/elg21-3764790/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4566021) from [Pixabay](https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=4566021)