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:
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.