I've finally had the chance to play around with Power Platform ToolBox, and I did it by "migrating" one of my old XrmToolbox tools, https://www.xrmtoolbox.com/plugins/Greg.Xrm.ModernThemeBuilder/.
However, calling it a simple migration would be misleading.
While the original idea remains the same, helping makers and developers create and manage themes for Model-Driven Apps, Theme Studio is actually a complete reengineering effort rather than a direct port of the existing tool.
🤔 Why a New Tool?
The original n.ModernThemeBuilder was developed around Microsoft's first implementation of modern themes for Model-Driven Apps. At the time, the platform exposed a relatively limited set of customization options, primarily focused on the AppHeaderColors capability.
Since then, Microsoft has significantly evolved the theme engine and introduced a much more flexible and comprehensive customization model based on Modern Theme Overrides.
If you're not familiar with the changes, Microsoft's documentation provides a detailed overview:
👉 Modern theme overrides for model-driven apps
The latest theme model goes far beyond application header colors and allows organizations to customize:
- Brand color palettes
- Typography
- Header styling
- Logos
- Application-specific theme assignments
- Environment-wide themes
- Additional UI color elements
Because of these changes, the architecture of the original tool was no longer sufficient.
Rather than trying to extend an old codebase designed around a more limited feature set, I decided to start from scratch and build a new experience specifically around the modern theme framework.
👀 A Visual Theme Designer
One of the biggest goals of Theme Studio was improving the design experience.
Editing theme XML manually is not exactly enjoyable, especially when you need to repeatedly save changes and validate the result inside a Model-Driven App.
Theme Studio introduces a WYSIWYG editing experience where makers can see the effects of their modifications immediately.
The interface is composed of two main areas:
- A live preview that reproduces key parts of a Model-Driven App experience
- A configuration panel used to edit theme settings
As changes are made, the preview updates in real time, making experimentation much faster and reducing the trial-and-error cycle.
Main Features
🔍 Live Preview
The tool provides a live representation of a Model-Driven App shell, including:
- Navigation elements
- Application header
- Command bar
- Form-like views
- Grid-like views
This allows users to understand how colors and styling choices impact the overall user experience before publishing changes.
With a simple selector you can toggle between form and view-like preview.
You can also increment or reduce the zoom and use a toggle to highlight the areas where the theme colors apply:
📝 Full Modern Theme Editing
Theme Studio supports the two distinct ways to manage theming:
- full custom theme management
- only override app header colors (legacy approach)
Due to the fact that the latter is just a subset of the former, we'll going to describe the full feature.
Theme Studio supports all major theme areas available through the modern theme model:
🎨 Palette Management
Customize the application's color palette.
You can:
- Select a base palette color manually, and play with vibrancy and hue torsion to get your own tone.
- Manually override palette slots
- Start from a preset, and move manually from there
🤖 Website-Based Color Extraction
One of the features I'm most excited about is the ability to generate a theme starting from an existing website.
Instead of manually choosing dozens of colors, Theme Studio can analyze a screenshot and extract dominant brand colors.
The workflow supports:
- Opening a website or loading a screenshot
- Selecting the area to analyze
- Extracting dominant colors
- Automatically mapping those colors to theme roles
To help create accessible experiences, the tool also displays WCAG contrast information during the mapping process.
This makes it much easier to build a theme that reflects an organization's existing branding while maintaining usability.
🔤 Typography
Configure font-related settings defined by the modern theme schema.
You can insert manually a font name, or peek one from the dropwdown list. As stated in the official documentation:
The font that the custom theme renders depends on the browser and target machine's ability to show that font.
🖼️ Logos
Upload and manage application logos directly from the editor.
You can:
- Select an existing Dataverse Web Resource to be used as logo
- Upload an image from a local file as a Dataverse Web Resource
- Specify the tooltip to be used for the logo
App Header Styling
Control header branding and colors, separate from the default branding colors.
If you don't choose to override the app header color, the default branding color becomes the background color of the header of your theme.
With this toggle you can improve the consistency of the layout selecting an hue different from the accent of the page.
📂 Import and Export
Themes can be:
- Imported from local XML files
- Exported to local XML files
- Loaded from Dataverse web resources
- Saved back to Dataverse
This makes it easy to move themes between environments or maintain them as source-controlled assets.
🌐 Dataverse Integration
Once you've built your theme, you can push it directly into Dataverse and apply the theme. Or you can simply re-open an existing theme file and update it.
Key capabilities include:
- Browsing available unmanaged solutions
- Opening existing theme web resources
- Creating new theme web resources
- Updating existing themes
- Publishing changes directly from the tool
Managed web resources can be inspected while remaining protected from accidental modifications.
Theme Scope Management
After saving a theme, Theme Studio can help assign it to:
- The entire environment
- A specific Model-Driven App
This simplifies deployment and helps ensure consistent branding across applications.
⚠️ Safe Editing Experience
Theme Studio includes several quality-of-life features designed to prevent mistakes:
- Dirty state tracking
- Confirmation dialogs for unsaved changes
- XML difference preview before saving
- Undoable color extraction operations
- Optional automatic publishing
Before saving a theme, users can review an XML diff showing exactly what changed.
🏃🏻➡️ Looking Ahead
Theme Studio is still under active development, but the foundation is now in place.
My goal is to continue improving the experience and keep the tool aligned with Microsoft's evolving theming capabilities for Model-Driven Apps.
Power Platform ToolBox provides an excellent modern foundation for community tools, and Theme Studio became the perfect opportunity to explore the platform while giving a much-needed refresh to one of my older projects.
If you're working with branded Model-Driven Apps and want a faster, more visual way to manage themes, give Theme Studio a try and let me know your feedback.
Top comments (0)