Custom branding within Power Apps

Recently I have been collaborating with clients with rigid branding guidelines which they needed to align to within their Power Apps canvas apps. Power Apps give us the ability to customise the colours of all the elements we are working with but doing this repeatedly can be time-consuming.

There is a selection of ways to tackle this that involve varying complexity; the solution I have been using and will explain here is setting a colour scheme within variables that run on the start of a Power App launching then referencing the variables rather than a colour code value or using the colour picker within our elements.

We can then create elements (e.g., buttons, labels) and anything else we will need on a screen and set our variables as the colours rather than having to use a palette picker or setting a colour code. We can then copy these customised buttons and labels throughout the rest of the Power App without having to configure their colour settings again.

Within the “Tree view” and the “Screens” menu we need to left-click “App”. This will bring up the “OnStart” formula builder.

Tree View within Power Apps.

We then need to paste the following into the formula bar. Amend the colour values to meet your branding needs.

Set(
Colors,{
Primary:ColorValue(“#1D2B4D”),
ButtonHover:ColorValue(“#003C75”),
HoverTint:ColorValue(“#E7FAFF”),
SelectTint:ColorValue(“#C2F2FF”),
Background:ColorValue(“#EBEBEB”),
ButtonTextLight:ColorValue(“#FFFFFF”),
ButtonTextDark:ColorValue(“#292929”),
DisabledButton:ColorValue(“#6D7383”),
DisabledButtonBorder:ColorValue(“#515869”)
}
)

Parameter formula bar within Power Apps.

Once we have successfully pasted and want to test, we left-click on the ellipses (…) to the right of App and left-click “Run OnStart”. This will then apply our new colour variables to our existing editing session.

Run OnStart within Power Apps.

Browse to the “Insert” menu and then left-click on “Button”. This will add a new button to our current screen. Then select “Fill” within the Properties picker drop-down. You will notice the default value is “RGBA(56, 96, 178, 1)”.

Fill property and formula bar default  within Power Apps.

We can remove this value and replace it with one of our newly set variables (e.g., “Colors.Primary”). We can then set any other colour settings we want to customise be they border, hover, pressed, etc. by using the same method on their respective properties.

Colour varaible used within Power Apps.

Once we have configured this button to our satisfaction, we can copy it around our Canvas App saving us time and clicks. Thanks for reading and I hope that has been useful for you!

If you would like to discuss how risual can help you exploit your investment in the Power Platform or have any questions regarding Microsoft 365 get in touch today.

www.risual.com/contact | 0300 303 2044 | enquiries@risual.com

To stay up to date with risual, follow us on Twitter (@risual) and LinkedIn.

About the author