{"id":1435,"date":"2017-11-15T22:18:12","date_gmt":"2017-11-16T03:18:12","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1435"},"modified":"2018-06-04T14:46:57","modified_gmt":"2018-06-04T18:46:57","slug":"how-to-use-a-custom-background-color-on-the-powerapp-loading-screen","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-use-a-custom-background-color-on-the-powerapp-loading-screen\/","title":{"rendered":"HOW TO: Use a custom background color on the PowerApp loading screen"},"content":{"rendered":"

When you create a PowerApp, you get to choose from 25 different background colors for the loading page.\u00a0 What if you want to match the color to your PowerApp’s icon and it is a different color than the 25 available in the editor?\u00a0 Can it be done?\u00a0 Well, of course it can be done<\/strong><\/em>, otherwise I wouldn’t write a blog post about it.\u00a0 This article shows you how to do it.<\/p>\n

To make reading this blog post as awesome as possible, I highly recommend listening to Pink Floyd’s Any Colour You Like in another browser window by clicking this link<\/a>.<\/p>\n

Here’s a screenshot that shows a PowerApp I’m working on.\u00a0 As you can see the icon color is a different color than the background color.\u00a0 I want the background color to match the icon color.<\/p>\n

\"\"<\/p>\n

Here’s a screenshot that shows the background colors available in the PowerApps editor.\u00a0 You can see the hex and RGBA values for the background color.<\/p>\n

\"\"<\/p>\n

Here’s the hex and RGBA values for the PowerApp icon.\u00a0 I’d like to make the background the same as this color.<\/p>\n

\"\"<\/p>\n

Here\u2019s the magic recipe, or hack, or duct tape, or whatever you want to call it.<\/p>\n

    \n
  1. Export the PowerApp.<\/li>\n
  2. Rename the .msapp file by adding the .zip extension.<\/li>\n
  3. Extract the export file to a directory.<\/li>\n
  4. In the directory, open the PublishInfo.json file.<\/li>\n
  5. Find the BackgroundColor element.
    \n\"\"<\/li>\n
  6. Modify the BackgroundColor element to match the color you desire.
    \n\"\"<\/li>\n
  7. Save the file.<\/li>\n
  8. Open the export .zip file in an archive tool like WinRAR, WinZIP, etc.<\/li>\n
  9. DRAG the PublishInfo.json file into the export .zip file to replace the PublishInfo.json file in the archive.
    \nNote:<\/strong>\u00a0You have to drag and drop the file into the archive, zipping the files in the directory will not work.<\/li>\n
  10. Close the archive tool.<\/li>\n
  11. Remove the .zip extension from the export file.<\/li>\n
  12. Open PowerApps studio in the desktop or web browser.<\/li>\n
  13. Delete the PowerApp you exported.<\/li>\n
  14. Click Open.<\/li>\n
  15. Click Browse.<\/li>\n
  16. Select the export .msapp file you modified.<\/li>\n
  17. Click OK.<\/li>\n
  18. Click Save.<\/li>\n<\/ol>\n


    \nBOOM!<\/strong>\u00a0Now you can run the PowerApp and see the background color matches your icon color!<\/p>\n

    \"\"<\/p>\n

    Here\u2019s a video where I demonstrate how to do it.<\/p>\n