Power Apps: Managing Themes & Styling Options

 

Introduction

Choosing a color scheme is one aspect. However, ensuring that it's simple to modify throughout your entire application is an extremely crucial decision. In your initial app, we highly suggest establishing a consistent approach from the beginning. It's essential to prioritize having a cohesive brand and color palette.

You can accomplish this easily by setting your colors while editing in Power App Studio. If done correctly, they can be reused and modified with great ease.

Power Apps Modern Themes  

You can access the built-in theme options from the App Authoring Menu, allowing you to select from a pre-existing theme or design your own for use with your app's controls. This feature may be turned on by default, but if the option is not visible, you will need to activate modern controls and themes in the app settings located in the build hub menu.

You can now see a themes section on the left side, where you can pick an existing theme or create a new one. When you create a new theme, you can choose a primary color, and Power Apps will automatically adjust different controls in your app that use modern controls, applying various shades of your chosen primary color.

Custom Themes Using Formulas

When modifying an app, you have the option to define Global Variables. These are variables or items that you establish and configure just once, allowing you to use them repeatedly across your app. Additionally, you can utilize Global Variables in any control you prefer.

We can achieve this by initially creating a new variable when our application starts (the most appropriate point for establishing app variables). Go to the Tree View, select App, and then pick OnStart from the properties menu above.

In the formula bar, we now need to create a new variable. Type:

                                   Set(varPrimaryColor, Color.DarkBlue)

This formula initializes a variable using the Set() formula, followed by the name of the variable. This can be anything of your choosing. Then the color you’d like to set inside the variable. In this case we will choose the inbuilt Dark Blue color.

When naming your variables and controls, it's beneficial to use clear prefixes to make them easily identifiable later on. It's also worth exploring alternative methods for representing color values, such as utilizing hex codes in conjunction with the ColorValue() formula.

To implement this, insert a button or a rectangle onto a new Screen in a Power App. (If you haven't done so already, click the + New Screen option in the Tree view. Then click the + icon and select Button.)

Now you have created your first formula.

Using Above Formula

Add a control to the screen from the insert menu. Select a control to add, in this case we can use a button. With the button selected, let’s navigate to the BaseColorPalette Property where we can now add the name of our variable to the formula bar i.e. varPrimaryColor When using the App OnStart formula, it will need to be manually triggered. The formula is designed to run whenever the app starts; however, we are already loaded into Power Apps Studio. To manually run it, select the ellipsis on the App in your Tree View and select Run OnStart.

You now possess a variable that holds a color value, and this value can be utilized for any property that needs a color assignment. Developing your applications in the methods illustrated in these sections enables you to easily modify the entire app's color theme by only altering the values in one location.

Conclusion

We have successfully discussed about managing themes and styling options.