PowerApps - Dynamically change theme of all the Screens in Canvas App

Hi Everyone,

Welcome to the Power Guide Mentorship Program. Today I am going to share 💪PowerGuideTip20💪, where I give you a Tip about changing the theme of the canvas app screens dynamically.

There are umpteen business requirements, where the client wants to have the feature/option in Canvas App to change/control the theme of all the canvas app screens from a single screen, instead of changing the theme or control properties from each screen individually.

Today, I am gonna demonstrate that Tip with you, that I had also demonstrated in the 365 Saturday PowerApps Event as well. Check here -  PowerApps Best Practices

Let's get started...

Step 1 - Create a Canvas App  or Use your existing Canvas App

Step 2 - Add a Profile Screen to view your profile information

To add the Profile Screen, I have added one Blank Screen and added one Rectangle which covers half of the screen to display my profile information, and added a few Circles to provide change theme options.

Step 3 - Add change theme option on Profile Screen

Filled the Circle with the Colors you want to change the theme as per your requirements. I have used Yellow, Blue, Green, and Purple for the demonstration purpose. 

Also added my Image and logged In user name by setting the Label Text property to User().fullname.

Step 4 - Add Logic to change the theme of all the screens from Profile Screen

Logic on Profile Screen - 

Here I have used two Canvas App Global Variables to set the color of the theme and font of all the screens.

Set(mytheme,RGBA(109, 49, 162, 1));

Set(fontcolor,RGBA(109, 49, 162, 1));

This is just an example of how you can change/manage the control settings of the canvas app through variables dynamically. You can use this tip to manage the other properties as well like height/width/background color etc.

Logic on Customer Screen (Home) - 

Here, I have passed the variable name (setting the color value on the profile screen dynamically) on the control property instead of using color code directly.

Step 5 - Demo

Important Note: It's always a good practice to keep your canvas app screens control property dynamic to make your canvas app responsive and to change the control property without any hassle and with less effort, Otherwise, it would be very difficult to change the control property of all the screens manually.

Please always this Tip keeps in mind while designing a canvas app screen. Especially, when you are designing an app with 10-15 screens.

Hope this PowerGuideTip helps you to design an effective canvas app with minimal effort.

Stay Tuned for PowerGuideTip21. Cheers!