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!
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.
