PowerApps is a great tool at building complex business applications using logic and no code. Microsoft provide several themes out-of-the-box to give your app a consistent look and feel. There is no option to create a custom theme (please release this functionality Microsoft)!
As a workaround, we can use some logic to have a single place to update the colours, fonts, etc. However, please note that there are some steps to set this up and its time consuming but once you have done this, it’s much easier to play around with the theme rather than editing every element individually.
To make our theme easy to update, we are going to create a new screen which will be used for defining our design. Create a new screen called “Theme”.
On this new screen, we are going to add the elements that we want to style. We only need one instance of font-size, primary colour and secondary colour.
To start with, I’m going to add a button on the theme screen. I’m going to give the button my own custom colour as a background colour.
In my theme, I’m going to rename my button to “ThemedButton” to make it easier to reference.
In every other screen in our app (and every new screen we make), we are going to set the properties of the objects to reference our theme screen element colours, sizes, etc.
In my Edit Screen, I’m going to select the “RectQuickActionBar” and select the “Fill” option. Rather than add a colour here in the formula bar, I’m going to reference our primary colour (used in the button on the theme screen). To do this, we enter:
Fill=ThemedButton.Fill
You can use this method to reference font size (ThemedButton.Size), font colour (ThemedButton.Color), etc.
Once you have setup all the properties, you can now change your styles in a single place by editing your theme screen.
It’s a very long-winded way to create a custom theme but might save you a lot of time changing colours when your manager asks for a different shade of blue across the whole app! I’m pretty sure custom themes will be on the Microsoft PowerApps roadmap soon, so you won’t have this problem!
If you need help with PowerApps, SharePoint or anything else Office 365 related, you can contact us at Cloud Design Box.
I took this suggestion only to discover that the AppChecker tool in PowerApps considers this method as a hit to performance: ‘Inefficient delay loading: Controls that reference controls on other screens can slow down app loading and navigation…’
The other option I found from another savvy PA user, was to declare the styles in a Style or Theme object variable in the App.Onstart formula. I initially opted away from this solution because I liked the idea of having a theme screen where I could visually see all of my styles.
Now I have been tasked with fixing the performance issues in the AppChecker (there are over 750). And I’ve come up with IMO a decent blend of the two:
I declare my styles in an object variable in the App.OnStart, and then use those variables to define labels, buttons, shapes, etc. on my Theme page. Then anytime I need a new button, for example, I copy it from the theme page and paste it where I need it. This has the added benefit of only having to define the styles for each of the properties (or the one’s I change from default) on an object once, instead of every time I add a button.
Hope this helps.
Hi Logan,
Many thanks for your comment. I’ve not used PowerApps for about 3 years now, so I was wondering if they had a solution now for theming. It looks like you have found an excellent way to do this.
Many thanks,
Tony