How to Create a Custom Theme in Power Apps?

In this tutorial, I will show you how to create a custom theme in Power Apps and how to give users the option to change the theme from a Power Apps screen.

As a Power Apps maker, you can change the theme anytime while developing the Canvas app. But what if you want to provide the option to the user so that they can change the theme from the screen itself? I will show you how to do that here.

Enable Modern Controls and Themes in Power Apps Canvas App

If the modern controls and theme have not been enabled in your Power Apps canvas app, then you can enable it from Settings.

Open the canvas app, then click on Settings from the command bar. Then, the Settings dialog box will open. Then click on Update, then On the toggle box for “Modern controls and themes“. See the screenshot below:

Then once you click on OK, the modern controls and themes will be available to use in the Canvas app.

Apply a Theme to Powe Apps Canvas App

To apply a theme to a Power Apps canvas app, From the “App authoring options” menu, click on …. And then choose Themes.

Then, it will show all the prebuilt themes available in the Canvas app, such as:

• Power Apps
• Teams
• SharePoint
• Steel
• Red
• Orange
• Green
• Platinum, etc.

Once you select any other Theme, the theme will be applied to all the screens. The output is shown in the screenshot below. On that screen, I have added one classic and modern button control, and you can see the color changes.

When you open the App’s Theme properties, you will see the OrangeTheme selected like the one below.

Even when you select the control and go to the Fill properties, you can see the color has been selected like below:

App.Theme.Colors.Primary

Here is the screenshot for your reference.

This is how the theme works in Power Apps.

Create a Custom Theme in Power Apps

Now, let me show you how to create a custom theme in Power Apps. It is simple and easy.

From the Themes screen, click on + Add a theme, and then you can choose the Theme name, Font, etc., like below. You can also click on the Preview button to see how it looks. Then click on the Create button.

Then, you can see the Theme created and available in the Themes section. You can see in the screenshot below:

This is how to create a custom theme in Power Apps.

Change Theme using Dropdown in Power Apps

Now, let me show you how to allow users to change the theme using a dropdown control in Power Apps. We will bind all the Themes to a dropdown control, and the user can change it from there.

Here, I have added one dropdown control (modern) and one Text label control.

Select the dropdown control, select the Items properties, and then add the theme names like the below:

['PowerAppsTheme','OrangeTheme','SharePointTheme','TeamsTheme']

It looks like below. Here I have just added two button controls just to see the output when we apply the theme. You can also add the custom theme here like below:

['BijayTheme','PowerAppsTheme','OrangeTheme','SharePointTheme','TeamsTheme']

In the next step, select the dropdown, then from the Properties (right-side), click on Edit fields as highlighted. Then click on the + Add field, then choose Name, and then click on the Add button. Check the screenshot below.

Now, in the dropdown OnChange event, we will create a global variable that will hold the selected theme. For this, select the dropdown control and write the formula below for the OnChange event.

Set(varNewTheme, Self.Selected)

Now, we need to set the variable in the App’s Theme property. So select the app, then write the variable name in the Theme property like in the screenshot below.

varNewTheme

Now, when you run the Power Apps app, and when the user selects the Theme from the dropdown, the theme will be applied to the Power Apps canvas app.

Conclusion

In this tutorial, I explained everything about the Power Apps themes and how to create a custom theme in Power Apps that we can apply for modern and classic controls. Finally, I explained how to bind themes to a dropdown control so that users can select the theme and apply it from a Power Apps screen.