Skip to main content
Community site session details

Community site session details

Session Id :

PowerApps Custom Theme Generator

CU11011415-0 Profile Picture Posted by CU11011415-0 472

This demo shows one way of allowing users to create and save their own Theme in your PowerApp using the Google Material Design colors.

 

I updated the app yesterday to include sliders to adjust the text color contrast.

https://youtu.be/h3f-0AkHCcc

 

Source Files: 

PowerApps Theme Configurator

 

Categories:

Comments

  • CU11011415-0 Profile Picture CU11011415-0 472
    Posted at
    PowerApps Custom Theme Generator

    Hi @ThatAPIGuy 

    I have two labels on the Settings screen, I set the Fill property of one to the selected Primary Color + Primary HUE, or if there is a saved theme I set the Fill property to the saved color + hue. For the other label, I set it's Fill to the Secondary choices or to the saved choices. For all of the other controls I set their Fill properties to one of the Settings Screen label Fill property for the desired effect. 

     

    I chose the Google Material Design colors for this demo app but for my employer I would use their own company color pallettes as well, you could use any set of colors you need. 

     

    Here are some related references :

     

    1. Google Material Design Color Tool - https://material.io/guidelines/style/color.html#color-Color-tool
    2. Design Guidance – Linking controls for easy design edits blog by Veronica Ward- https://powerapps.microsoft.com/en-us/blog/design-guidance-linking-controls-for-easy-design-edits/
    3. Understand Variables in PowerApps - https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/working-with-variables
    4. Giving Consumers Color and Text Size Configuration Options by Audrie Gordon - https://powerapps.microsoft.com/en-us/blog/giving-consumers-color-and-text-size-configuration-options/
  • ThatAPIGuy Profile Picture ThatAPIGuy 925
    Posted at
    PowerApps Custom Theme Generator

    @KC

     

    On a second thought, how did you link the color values to all the elements in the app. Did you do it for every label, button, etc. or is there some level of automation that can be achieved?

  • ThatAPIGuy Profile Picture ThatAPIGuy 925
    Posted at
    PowerApps Custom Theme Generator

    @KC

     

    Super Useful stuff!

     

    not sure if i will use this tool exactly the same, but might modify it a bit to suit our company style guide and keep a consistency across various apps.

     

    Thanks again!