{"id":239,"date":"2017-03-25T03:20:39","date_gmt":"2017-03-25T10:20:39","guid":{"rendered":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/giving-consumers-color-and-text-size-configuration-options\/"},"modified":"2025-06-11T08:15:08","modified_gmt":"2025-06-11T15:15:08","slug":"giving-consumers-color-and-text-size-configuration-options","status":"publish","type":"post","link":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/giving-consumers-color-and-text-size-configuration-options\/","title":{"rendered":"Giving Consumers Color and Text Size Configuration Options"},"content":{"rendered":"

One of my favorite things about PowerApps is the way it helps me (as an app designer) to combine best practices in \u2018design\u2019 with \u2018technical functionality\u2019. Bringing these two factors together strengthens the probability that people who use the apps I\u2019ve created, will actually \u2018enjoy\u2019 using them. This week’s app sample was inspired by someone who posted a Forum Idea regarding PowerApp Themes. We really enjoy reading all<\/u> the forum ideas, and I refer to those who post ideas as our enthusiastic \u201cinnovators\u201d. This particular innovator came up with the idea that we should expose our color themes to the consumer of the app (aka the person running the app), and not only to the designer (or app maker). What an awesome idea! It shows that they appreciate Empathic Design. Empathic Design is a process that one of my past managers (Karuana Gatimu) has instilled in me. It is a user-centered design approach that pays attention to the user’s feelings toward a product. As I thought about this further, I realized that this is even more relevant in mobile app design because factors around mobility can affect the way we use contrast and color on the screen; low light, screen glare, etc. (depending on where the person is when they are running the app). It also could apply to accessibility, especially for people like me who always want to make the font size bigger! So, with all those good reasons in mind, I decided to see if I could create my own configurable theme, using the features and formulas that are already in PowerApps today. I love what I ended up with, and I hope you will too!<\/p>\n

Example Business Scenario<\/strong>:<\/p>\n

Image that we need to create a knowledge management app. People will use the app to look up information, and to get examples of how to build contract specifications, based on the category of work to be done. Due to the advanced speed to delivery, we decide to create a PowerApp, and to publish it to the entire organization. Our PowerApp will be used by internal staff within a web browser, and by field representatives using iOS, Android, or Windows Phones externally. Since our field representatives often work outside with Surveyors, we\u2019d like to make our apps friendly for outside use as well, where contrast is a priority. Therefore, we decide to give the end user the option of viewing the PowerApp in full color or in greyscale, or to invert the palette to a monotone white text on a black background format.<\/p>\n

Here’s a peak at how it will work. The app consumer will tap on the tools icon (on the right hand side of the header) to open a menu of display options. They can put them away by tapping the tools icon again.<\/p>\n

\"\"<\/p>\n

…and here’s how you do it!<\/strong><\/p>\n

1. Preparing our Style Selections and Default Values<\/strong><\/p>\n

We plan to use 5 variables that represent colors and standard text size. You can use more, or less, depending on the complexity of your screens.<\/p>\n

\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HText<\/strong> (Header\/Button Text Color) \u2013 Defaulted to White<\/p>\n

\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 HBack<\/strong> (Header\/Button Background Color) \u2013 Defaulted to ColorValue(“#DA4453”)<\/p>\n

\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 SBack<\/strong> (Screen Background Color) \u2013 Defaulted to White<\/p>\n

\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ForeTT<\/strong> (Text Color) \u2013 Defaulted to Black<\/p>\n

\u00b7\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 FSize<\/strong> (Font Size \u2013 Page and Gallery Text) \u2013 Defaulted at 18<\/p>\n

Use the OnVisible* Property of the 1st<\/sup> Screen<\/u><\/strong> to set<\/strong> default values<\/strong><\/u> I am using a \u201cCollection\u201d for my color settings, and a Context Variable for the font size, just to show you another variable option. FYI<\/strong>: I set the OnVisible property of the 1st<\/sup> screen to update all default values, any other screens would only need the FSize context variable UpdateContext({FSize=18}\u00a0<\/strong> (Learn more about variables on this page<\/a>.)<\/p>\n

Put this in the OnVisible <\/strong>property of the 1st Screen:<\/p>\n

ClearCollect(ColorSettings,
\n\u00a0 {Name: “HText”, Value: White},
\n\u00a0 {Name: “HBack”, Value: ColorValue(“#DA4453”)},
\n\u00a0 {Name: “SBack”, Value: White},
\n\u00a0 {Name: “ForeTT”, Value: Black});UpdateContext({FSize=18})<\/strong><\/p>\n

*In my app you\u2019ll notice I also load a collection called \u201cCityPopulations\u201d. That is just the data for the gallery on the screen. I put that in the footnote of the PowerPoint slide in my OneDrive here<\/a>.<\/p>\n

2. App Screen Design<\/strong><\/p>\n

I built a single page app as shown in the image below (feel free to modify this design, but I suggest you keep the control names).<\/p>\n

\"\"<\/p>\n

3. The Configuration Icons<\/strong><\/p>\n

I added the \u201cTools\u201d icon from our PowerApp Icons (so that the user could use it to open the menu of choices). I also created a few icons to represent the different palettes (If you don\u2019t want to design your own phone icons, then mine are in the PowerPoint file <\/u><\/a>as well.)\u00a0 Note: The version on my original\u00a0twitter feed <\/a>is using little color palette squares…but what you use as icons is entirely up to your imagination!<\/p>\n

After embedding the phone icons as media in my app (Content Tab>Media>Browse), I added 3 image controls\u00a0to display\u00a0the phone images. Finally, I sized them small and aligned them side-by-side, and set the following formulas:<\/p>\n\n\n\n\n\n\n\n
\n

<\/p>\n<\/td>\n

\n

Image: FileNameofIcon1<\/p>\n

\u00a0<\/p>\n

OnSelect<\/strong>:
\n\t\t\tClearCollect(ColorSettings,
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “HText”, Value: White},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “HBack”, Value: ColorValue(“#DA4453”)},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “SBack”, Value: White},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “ForeTT”, Value: Black})<\/p>\n<\/td>\n<\/tr>\n

\n

<\/p>\n<\/td>\n

\n

Image: FileNameofIcon2<\/p>\n

\u00a0<\/p>\n

OnSelect:<\/strong>
\n\t\t\tClearCollect(ColorSettings,
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “HText”, Value: White},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “HBack”, Value: DimGray},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “SBack”, Value: White},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “ForeTT”, Value: Black})<\/p>\n<\/td>\n<\/tr>\n

\n

<\/p>\n<\/td>\n

\n

Image: FileNameofIcon3<\/p>\n

\u00a0<\/p>\n

OnSelect<\/strong>:
\n\t\t\tClearCollect(ColorSettings,
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “HText”, Value: White},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “HBack”, Value: Black},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “SBack”, Value: Black},
\n\t\t\t\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {Name: “ForeTT”, Value: White})<\/p>\n<\/td>\n<\/tr>\n

\n

Slider1 control<\/p>\n<\/td>\n

\n

OnChange <\/strong>Property:
\n\t\t\tUpdateContext({FSize:FontSlider.Value})<\/p>\n<\/td>\n<\/tr>\n

\n

Tools Icon <\/p>\n<\/td>\n

\n

OnSelect<\/strong> Property:
\n\t\t\tIf(Conf=true,UpdateContext({Conf:false}),UpdateContext({Conf:true}))<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

4. Setting Up the Menu<\/b><\/p>\n

After configuring each OnSelect<\/strong> property as shown above, I then added\u00a0a slider control for text sizing (Slider1) beneath them, and grouped everything <\/strong>so I could display them all with 1 tap on the Tools Icon in the header.<\/p>\n

The OnVisible<\/strong> property of the new Group of controls is set to: Conf=true\u00a0 <\/strong>This is so that they would only show up if the value of my variable Conf is equal to true. (Notice the OnSelect formula for the “Tools” icon in the table above.)<\/p>\n

\"\"<\/p>\n

I have uploaded my PowerApp file to my OneDrive so you can download it from here<\/a>, and learn from it. Feel free to use it for your work too! ?<\/p>\n

This was surprisingly easy! Isn\u2019t PowerApps the best thing since baked Cinnamon Rolls!? Please let me know if you expand upon this idea for your own PowerApps in the comment area below.<\/p>\n

Happy PowerApping,<\/p>\n

Audrie
\nTwitter @ArtsyPowerApper<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"

This new app sample was inspired by someone who posted a Forum Idea regarding PowerApp Themes. We really enjoy reading all the forum ideas, and I refer to those who post ideas as our enthusiastic \u201cinnovators\u201d. This particular innovator came up with the idea that we should expose our \u201cThemes\u201d (see screen shot below) to the consumer of the app (aka the person running the app), and not only to the designer (or app maker). What an awesome idea! It really shows that they appreciate Empathic Design. Empathic Design is a process that one of my past managers (Karuana Gatimu) has instilled in me. It is a user-centered design approach that pays attention to the user’s feelings toward a product. As I thought about this further, I realized that this could also be even more relevant in mobile app design because factors around mobility can affect the way we format the screen; low light, screen glare, etc. depending on where the person is when they are running the app. It also could apply to accessibility, especially for people like me who always wants to make the font size bigger! So, will all those good reasons in mind, I decided to see if I could create my own configurable theme, using the features and formulas that are already in PowerApps today. I love what I ended up with, and I hope you will too! (Please let me know if you expand upon this idea for your own PowerApps in the comment area below.<\/p>\n","protected":false},"author":106,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[],"job-role":[],"product":[3473],"property":[],"topic":[3421],"coauthors":[2058],"class_list":["post-239","post","type-post","status-publish","format-standard","hentry","audience-it-professional","product-power-apps","topic-application-modernization"],"yoast_head":"\nGiving Consumers Color and Text Size Configuration Options - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Giving Consumers Color and Text Size Configuration Options - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"This new app sample was inspired by someone who posted a Forum Idea regarding PowerApp Themes. We really enjoy reading all the forum ideas, and I refer to those who post ideas as our enthusiastic \u201cinnovators\u201d. This particular innovator came up with the idea that we should expose our \u201cThemes\u201d (see screen shot below) to the consumer of the app (aka the person running the app), and not only to the designer (or app maker). What an awesome idea! It really shows that they appreciate Empathic Design. Empathic Design is a process that one of my past managers (Karuana Gatimu) has instilled in me. It is a user-centered design approach that pays attention to the user's feelings toward a product. As I thought about this further, I realized that this could also be even more relevant in mobile app design because factors around mobility can affect the way we format the screen; low light, screen glare, etc. depending on where the person is when they are running the app. It also could apply to accessibility, especially for people like me who always wants to make the font size bigger! So, will all those good reasons in mind, I decided to see if I could create my own configurable theme, using the features and formulas that are already in PowerApps today. I love what I ended up with, and I hope you will too! (Please let me know if you expand upon this idea for your own PowerApps in the comment area below.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/giving-consumers-color-and-text-size-configuration-options\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-25T10:20:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:15:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Color_Palette_App_Gif.gif\" \/>\n<meta name=\"author\" content=\"Audrie Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Audrie Gordon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/\"},\"author\":[{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/author\\\/audrie-gordon\\\/\",\"@type\":\"Person\",\"@name\":\"Audrie Gordon\"}],\"headline\":\"Giving Consumers Color and Text Size Configuration Options\",\"datePublished\":\"2017-03-25T10:20:39+00:00\",\"dateModified\":\"2025-06-11T15:15:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/\"},\"wordCount\":1087,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Color_Palette_App_Gif.gif\",\"keywords\":[\"Formulas\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/\",\"url\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/\",\"name\":\"Giving Consumers Color and Text Size Configuration Options - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Color_Palette_App_Gif.gif\",\"datePublished\":\"2017-03-25T10:20:39+00:00\",\"dateModified\":\"2025-06-11T15:15:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Color_Palette_App_Gif.gif\",\"contentUrl\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Color_Palette_App_Gif.gif\",\"width\":400,\"height\":704,\"caption\":\"table\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/2017\\\/03\\\/25\\\/giving-consumers-color-and-text-size-configuration-options\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Giving Consumers Color and Text Size Configuration Options\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/#\\\/schema\\\/person\\\/5622f11b1629eeff57465c794c80c936\",\"name\":\"Audrie Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g84a7fd97215038815e0a810e606188f3\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g\",\"caption\":\"Audrie Gordon\"},\"url\":\"https:\\\/\\\/cm-edgetun.pages.dev\\\/en-us\\\/power-platform\\\/blog\\\/author\\\/audrie\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Giving Consumers Color and Text Size Configuration Options - Microsoft Power Platform Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/","og_locale":"en_US","og_type":"article","og_title":"Giving Consumers Color and Text Size Configuration Options - Microsoft Power Platform Blog","og_description":"This new app sample was inspired by someone who posted a Forum Idea regarding PowerApp Themes. We really enjoy reading all the forum ideas, and I refer to those who post ideas as our enthusiastic \u201cinnovators\u201d. This particular innovator came up with the idea that we should expose our \u201cThemes\u201d (see screen shot below) to the consumer of the app (aka the person running the app), and not only to the designer (or app maker). What an awesome idea! It really shows that they appreciate Empathic Design. Empathic Design is a process that one of my past managers (Karuana Gatimu) has instilled in me. It is a user-centered design approach that pays attention to the user's feelings toward a product. As I thought about this further, I realized that this could also be even more relevant in mobile app design because factors around mobility can affect the way we format the screen; low light, screen glare, etc. depending on where the person is when they are running the app. It also could apply to accessibility, especially for people like me who always wants to make the font size bigger! So, will all those good reasons in mind, I decided to see if I could create my own configurable theme, using the features and formulas that are already in PowerApps today. I love what I ended up with, and I hope you will too! (Please let me know if you expand upon this idea for your own PowerApps in the comment area below.","og_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/giving-consumers-color-and-text-size-configuration-options\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2017-03-25T10:20:39+00:00","article_modified_time":"2025-06-11T15:15:08+00:00","og_image":[{"url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Color_Palette_App_Gif.gif","type":"","width":"","height":""}],"author":"Audrie Gordon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Audrie Gordon","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#article","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/"},"author":[{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/audrie-gordon\/","@type":"Person","@name":"Audrie Gordon"}],"headline":"Giving Consumers Color and Text Size Configuration Options","datePublished":"2017-03-25T10:20:39+00:00","dateModified":"2025-06-11T15:15:08+00:00","mainEntityOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/"},"wordCount":1087,"commentCount":0,"publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#primaryimage"},"thumbnailUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Color_Palette_App_Gif.gif","keywords":["Formulas"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/","name":"Giving Consumers Color and Text Size Configuration Options - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#primaryimage"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#primaryimage"},"thumbnailUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Color_Palette_App_Gif.gif","datePublished":"2017-03-25T10:20:39+00:00","dateModified":"2025-06-11T15:15:08+00:00","breadcrumb":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#primaryimage","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Color_Palette_App_Gif.gif","contentUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/03\/Color_Palette_App_Gif.gif","width":400,"height":704,"caption":"table"},{"@type":"BreadcrumbList","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2017\/03\/25\/giving-consumers-color-and-text-size-configuration-options\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"Giving Consumers Color and Text Size Configuration Options"}]},{"@type":"WebSite","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/person\/5622f11b1629eeff57465c794c80c936","name":"Audrie Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g84a7fd97215038815e0a810e606188f3","url":"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a060fc178064c33f81ec0c74cf167a845dc0a9f86c71fd9a276c1eae2d7ae30?s=96&d=mm&r=g","caption":"Audrie Gordon"},"url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/audrie\/"}]}},"bloginabox_animated_featured_image":null,"bloginabox_display_generated_audio":false,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/106"}],"replies":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":6,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions"}],"predecessor-version":[{"id":125022,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/239\/revisions\/125022"}],"wp:attachment":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=239"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=239"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=239"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=239"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=239"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=239"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=239"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}