Modern Theming is coming! Are your components ready?๐Ÿค”

Modern Theming is coming! Are your components ready?๐Ÿค”

Image by PublicDomainPictures from Pixabay


4 min read

I recently gave a session at the Microsoft Cloud (South Coast) User Group where I talked about Component Libraries and Crabs (Do I talk about anything else? ๐Ÿฆ€). It went really well and the ground didn't swallow me up.

I had a great question from one of the audience around theming and keeping that consistent. I'd already discussed using a property record to try and simplify this for your fellow makers. I mentioned this as a way to keep your theming consistent for all your components, but you could also adopt the theming structure of something like the iAm_ManCat Branding Template V3 by Sancho Harker to standardise this between your Canvas Apps and Components.

However, the next day, I noticed a post about the Modern Theming Control coming to Preview. I knew I had to check this out, but more importantly, I needed to understand how this impacts Components and Component Libraries.

What is this Modern Theming?

The Modern Theming goes hand-in-hand with the new Modern Controls coming to Power Apps. They're more accessible, themable controls that replace the Classic controls we've grown to.. well, guess that depends what controls we're talking about.

They're based on Microsoft's Fluent Design system and to be honest, they look great! I'm all for anything that can make Maker's lives easier, and it seems like these controls set out to do just that.

If you can't already see the Modern Controls and Modern Themes in Power Apps Studio, it is enabled as a Preview Feature in Settings > Upcoming Features:

How do these themes work?

Themes are now stored/called in an Enumerated value in the App scope. For example, you can call:

Color = App.Theme.Colors.Darker10

Each theme have a Colour scheme that goes down from Darker10 to Darker70, up from Lighter 10 to Lighter 80 and a Primary Colour. Primary, Secondary colours etc, were never directly addressable in Studio previously, so this is a great step in the right direction.

Changing your theme will affect any Modern Controls in your App. Using the Enumerated values above, you can assign your theme colours to Classic controls as well, making them compatible with Modern Themes, albeit with some effort required.

The current trade off here are that Modern Controls don't have editable colours, typography, borders etc. In essence, this is to support the new theming control. However, as of now, modern themes don't support borders or typography. Although this is intended to come later according to the documentation.

So what about Components?

I've put a simple component together in a component library. It doesn't do anything special, aside from just containing some modern controls, and a classic control (Text box) with one of the enumerated values mapped to the font colour property. Note I've set my Component Library theme to Orange.

I'll fire up a new Canvas App, enable the new theming and import my new component library.

^^ By the way, THIS needs to CHANGE! This should be a portal for makers to discover new components, not a plain text list that leaves a lot to be desired.

Anyway, because of the way Components are added to Canvas Apps, they sit in that "Classic" section under "Library components". I configured the library to use the Orange theme, I'll add the app to the Canvas App screen:

Hey! Look at that!

My Canvas App is currently set to "Power Apps Blue". No, really, that's the theme name!

And if I change to Crab Red ๐Ÿฆ€:


What does this prove?

This proves the following:

  • Modern Controls used from a Component Library will inherit the Canvas app's selected theme, not the theme selected in the Component Library itself.

  • This is also true when we reference the App's enumerated theme values for Classic controls. So, we can also modernize the classic controls to take advantage of the new theming system in both our Canvas Apps, Custom Pages but also Components in Component Libraries as well. You can "Modernise" your existing Classic Control-based Components by mapping the new theme enumerated values.

Also note, we ideally want the themes to be expanded to include border configuration and typography (fonts etc) as well. I understand custom theming is also on the cards here, which will be great to quickly brand your apps.

But rest assured, your component libraries will be fine, and this feature will just make them better!