Design

How to Set Your Theme in Microsoft’s Power Apps

Istock 1126048505

You’re ready to dive deep into Microsoft’s Power Apps, but maybe wondering the easiest way to use color schemes throughout your app. You can make your code into more readable and maintainable in just a few easy steps.

Themes help with consistency throughout your app and let you easily reference colors while designing. Not only do themes help with uniformity in design, but they also help your app be adaptable to change and easier to maintain. If you need to change the color scheme of your app, you simply have to change a few lines of code rather than changing the code in every place you used color.

Pick Your Theme Colors

Power Apps uses the RGBA color format. A great tool that can assist you in choosing your theme colors and getting the RGBA values is Adobe’s https://color.adobe.com/create. Upon opening the screen, you’ll see a color wheel. The circle containing the white triangle dictates your primary color.

Settingthemes

You have the option on the left of the screen to choose a color Harmony Rule, which helps quickly build a cohesive theme! The Color Harmony Rules take your preferred color and automatically positions the secondary colors based on coloring rules. In terms of standard practices, most color schemes will fall under Analogous, Monochromatic, and Complementary Harmony Rules. This helps easily create color pallets if you don’t have experience doing so. Finally, scroll to the bottom of the page to retrieve your RBGA values.

Find Rbg

Platforms & Technology - A Business Leaders Guide to Key Trends in Cloud
A Business Leaders Guide to Key Trends in Cloud

Cloud’s dynamic nature can make it hard to keep up with the wide-ranging capabilities that make it a key enabler to improve business processes and support a larger digital transformation.

Get the Guide

Another great way to retrieve your RGBA values is through the “Extract Theme” option.

Adobeextracttheme

All you need to use this functionality is a picture or screenshot with your desires color theme, and Adobe will extract the colors from the picture.

Extracting Theme

Set a Global Variable

Once you have your theme, you can now easily set your colors in your Power App. Setting global variables happen in the ‘On Start’ function. You can find that by clicking the’ App’ tab on the Tree View Panel on the left. Upon clicking, you will see the ‘OnStart’ function in the function bar above.

Settingonstart

Use the function Set() to set color theme colors.

Set(

        Colors,{

                Primary:RGBA(255,78,0,1),

                Secondary:RGBA(1,173,171,1),

                DarkPrimary:RGBA(1,131,128,1),

                DarkSecondary:RGBA(156,208,32,1),

                LightPrimary:RGBA(232,232,232,1),

                LightSecondary:RGBA(110,110,110,1)

                }

        )

To initialize your global variable, click the ellipses menu by the ‘App’ tab and select ‘Run OnStart.’

Referencing Your Variable

To reference your new global variable, you reference the object Colors and specify the attribute. Ex: ‘Colors. Primary’

Colorsyntax

Congrats! You can now easily define and set color schemes in your Power Apps. Happy Designing!

About the Author

Taylon is a problem-solving technical consultant who strives to provide a positive team and customer experience.

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.