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.
Change Rectangle \'Fill\' Property

Change Textbox \'Color\' Property

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!

Published by arpitpowerguide

My name is Arpit Shrivastava, who is a Microsoft MVP in the Business Applications category. I am a Microsoft Dynamics 365 and Power Platform enthusiast person who is having a passion for researching and learning new things and acquiring immense knowledge. I am providing consistent help, support, and sharing my knowledge through various Social Media Channels along with my Personal Blog, Microsoft Community, conducting online training and attending various 365 Saturday Events worldwide and sharing the best Solutions to the readers helping them achieve their goals and objectives in Customer Relationship Space.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: