Using a Collection to define a global colour scheme for our PowerApps

If an organisation undergoes a rebrand or a client changes their mind about the appearance of a PowerApp during or after development it can be a pain to change the colour of every control in your app. Here is a method that will take a lot of the pain away from changing the colour theme.

Using a collection to define a colour scheme.

Defining a colour scheme using a Collection that can be referenced throughout our PowerApps provides a lot of flexibility when it comes to making design changes.

We can use a Collection to define the colours we want to use throughout our apps. The benefit of this approach is if we need to amend the colour scheme, it is easily achieved by changing the values in the collection rather than each property on every screen. It also avoids the need to write repetitive code for colour values across multiple screens.

Benefits of using a PowerApps Collection over a theme defined on a separate screen

A common approach to defining a colour scheme is to create a separate screen with UI elements that are referenced throughout the PowerApp. The problem with this method is it creates inter-screen dependencies that can slow down load load times. The Delayed Load option in PowerApps doesn't work if there are dependencies between screens. Using a PowerApps Collection overcomes this problem as no dependency is created, resulting in faster load times.

ClearCollect(
  ButtonStyle,
    {Name: "Fill", Value: RGBA(211, 216, 222, 1)},
    {Name: "Color", Value: RGBA(0, 0, 0, 1)},
    {Name: "HoverFill", Value: ColorFade(RGBA(233, 88, 20, 1), -10%)},
    {Name: "PressedFill", Value: ColorFade(RGBA(233, 88, 20, 1), -30%)},
    {Name: "PressedColor", Value: RGBA(255, 255, 255, 1)},
    {Name: "HoverColor", Value: RGBA(255, 255, 255, 1)}
);