How to Change the Color Theme in PowerApps During Run Time.

A great way to make your PowerApps user friendly while increasing engagement is to let them choose the theme color during run time. In this tutorial I will show you step by step how to Change the color theme in PowerApps during run time. Continue reading and you too will be an office power user!

Animation showing user changing the color theme in PowerApps

In this demo will will use two tables, one for the PowerApps colors and one to persist the users color choice. We will then retrieve the user chosen color and store it in a variable. Once we have the users color in a variable we than reference it anywhere we need it. So let’s get started with a new screen.

  • New Screen
    • Name: ScreenColorTheme
    • OnVisible
      Set(
      varClientColor,
      //This is the color to use throughout the app.
      LookUp(
      ‘[dbo].[tblClients]’,
      ClientID = varClientID
      ).ClientColorName
      );

      Set(
      varClientColorRestore,
      //This is the color to use to restore the app color.
      LookUp(
      ‘[dbo].[tblClients]’,
      ClientID = varClientID
      ).ClientColorName
      )

Now we will insert the a gallery control to allow the users to select and try different colors. Tip: Only show colors that will complement the text your are using. For example dark colors if you are using white text.

  • Gallery Control
    • Name: GalleryThemeColorDemo
    • Items:
      Sort(
      ‘[dbo].[tblPowerAppColors]’,
      PowerAppColorValue,
      Ascending
      )
    • X: 13
    • Y: 17
    • Width: 467
    • Height: 556
  • Button: (Place this inside the gallery control.)
    • Text: ThisItem.PowerAppColor
    • PressedColor: RGBA(0, 0, 0, 1)
    • PressedFill: RGBA(0, 0, 0, 0)
  • Rectangle: (Place this inside the gallery control. This shows the visual of the color.)
    • Fill: ColorValue(ThisItem.PowerAppColor)

Now let’s insert a rectangle to display the color selected and three buttons placed directly under this rectangle. One button to test the color, one to restore the color and the other to update the users new color selected and save it back to the table.

  • Rectangle: (Used to Show the color selected)
    • Fill: ColorValue(GalleryThemeColorDemo.Selected.PowerAppColor)
    • X: 513
    • Y: 195
    • Width: 472
    • Height: 227
  • Button: (This is the button to test the color and see how it looks in the app.)
    • Text: Test Color
    • Fill: ColorValue(GalleryThemeColorDemo.Selected.PowerAppColor)
    • OnSelect:
      Set(
      varClientColor,
      GalleryThemeColorDemo.Selected.PowerAppColor
      );
  • Button: (This is the button to reset the color back to the last saved.)
    • Text: Reset Saved Values
    • Fill: ColorValue(varClientColorRestore)
    • OnSelect:
      Set(
      varClientColor,
      varClientColorRestore
      );
  • Button: (This is the button to save the users new color preference.)
    • Text: Save New Colors
    • Fill: ColorValue(varClientColor)
    • OnSelect:
      UpdateIf(
      ‘[dbo].[tblClients]’,
      ClientID = varClientID,
      {
      ClientColorName: GalleryThemeColorDemo.Selected.PowerAppColor
      }
      );
      Set(
      varClientColor,
      GalleryThemeColorDemo.Selected.PowerAppColor
      );

You now know how to change the color theme in PowerApps during run time. Read my post how-to-let-user-set-first-screen-dynamically-in-powerapps as an additional way to give your users customization choices or my quick reference post on how-to-change-drop-down-colors-in-powerapps/ Your users will love you for it!

Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles will be posted regularly.

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...

9 Responses

  1. pavithra says:

    Where do I take color??

  1. August 18, 2019

    […] you can give your users the ability to use their own colors using the techniques in my post how-to-change-the-color-theme-in-powerapps-during-run-time […]

  2. August 26, 2019

    […] You now know how to let the user set start screen dynamically in PowerApps. As you can see by giving the user the ability to save their default settings you can save them time and make your apps user friendly. For an additional technique read this post how-to-change-the-color-theme-in-powerapps-during-run-time. […]

  3. August 26, 2019

    […] values from the database and assign them to the variable you set as the default. Read my post on how-to-change-the-color-theme-in-powerapps-during-run-time as an additional way to give your users customization […]

  4. August 31, 2019

    […] correct property I missed. It’s probably my least favorite thing to do in PowerApps when I customize a color theme. So I put this cheat sheet together on how to change the drop down colors in PowerApps so that I […]

  5. December 8, 2019

    […] How to change the color theme during run time in PowerAppsExcellent Explanation of the Last and FirstN Functions to Create Row Numbers […]

Leave a Reply

Your email address will not be published. Required fields are marked *