A clean and intuitive user interface (UI) is key to the successful adoption of any application. In enterprise applications like Dynamics 365 CE and Dataverse Model-Driven Apps, where users spend significant time navigating complex data, the importance of good UI/UX cannot be overstated. Microsoft understands this well and has provided several tools to help developers tweak the visual experience of their apps.

In this post, we’ll explore the challenges each dev must face when working with theme management features in Dynamics 365 CE and Model-Driven Apps, focusing on how open source tools can help streamline also this activity.

Why UI/UX Matters 🤔

Before diving into the technical features, it's important to remember why UI/UX matters. A well-designed UI:

• Increases user engagement
• Reduces friction in navigation
• Enhances productivity by making the app easier to use
• Strengthens the overall perception of the brand

To cater to these needs, Microsoft has made significant improvements in theme management over time, introducing first the legacy Theme management feature, then the brand new Modern Themes (while still retaining some capabilities of the old system).

Dataverse Theme Management Capabilities 🎨

The Modern Theme Management capability in Dataverse and Dynamics 365 provides a user-friendly way to customize key aspects of your app’s visual design. With Modern Themes you can tweak the colors of the title bar, while with the legacy theming capability you can also change the logo:

This setting is managed at the environment level, meaning that all model-driven apps within an environment will inherit the same colors and logo.

The bad part 😤

Let's say it... theme management features are there, but are quite tricky to use.
To set a modern theme you need to:

• create an xml webresource with a precise schema (that you need to know)
• tweak with specially-named-environment-variables
• remember to publish everything

While the old theme management, well... It was provided with a nice UI, however with with the introduction of the Power Platform Environment Settings app, the old theme settings are no longer visible in the default user interface. You need to:

• Switch back to the old settings experience (if still possible), or
• Do it via code.

But, you know I'm lazy, and all that manual stuff gives me headaches.

The Right Tools for the Job 💪🏻

To make managing modern themes more intuitive, I recommend using my XrmToolbox plugin, _n.ModernThemeBuilder. This tool provides a WYSIWYG (What You See Is What You Get) interface for managing modern themes.

It's really intuitive and easy to use, it does all the manual steps for you!

At the same time, if you want to set also the logo, you can use the useful pacx command:

pacx webresources setEnvImage
most used alias: pacx wr setLogo

This command simplifies the process of setting environment images, ensuring that your app logos are consistent and professional without manually navigating through legacy settings. You can find the command definition and behavior documented here.

In the future I will merge the two in _n.ModernThemeBuilder. Right now, my whole Power App development experience revolves around pacx, so I'll stick with it 😉

Conclusion ✍🏻

As Dataverse and Dynamics 365 CE continue to evolve, Microsoft is making theme management more streamlined while ensuring that developers retain the ability to customize the user experience. Although Modern Themes bring simplicity and efficiency, you may still need to use the legacy tools for specific tasks like changing app logos.

By leveraging tools like the Modern Theme Builder for easy WYSIWYG theme management and the pacx command for setting logos, you can ensure that your apps not only look great but also offer a polished and professional user experience!

Happy CRMing 😉