> For the complete documentation index, see [llms.txt](https://docs.candy-smith.com/main/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.candy-smith.com/main/block-puzzle-game-toolkit/how-to-reskin-game-ui-in-unity.md).

# How to reskin game UI in Unity

1. Go to <mark style="color:green;">**Assets**</mark> **->&#x20;**<mark style="color:green;">**Resources**</mark>**&#x20;->&#x20;**<mark style="color:green;">**Popups**</mark><br>

   <figure><img src="https://2636043456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylsttW53swa3nBL2KBDZ%2Fuploads%2FfH7CaU1QilXuYKmOljCz%2Fimage.png?alt=media&amp;token=3f5e44ca-fe37-4e12-befb-10a3c9bddb8a" alt=""><figcaption></figcaption></figure>
2. Choose the UI that you want to modify. For example, let's select the **Daily Bonus UI**
3. Look in the **Inspector**
4. Select **Menus\_label Source Image**<br>

   <figure><img src="https://2636043456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylsttW53swa3nBL2KBDZ%2Fuploads%2FBVXgvg1EVIc5VD95b5a1%2Fimage.png?alt=media&amp;token=8bc9d817-ee7c-44a3-ba5c-f981c454bb91" alt=""><figcaption></figcaption></figure>
5. Change the color to the one you want<br>

   <figure><img src="https://2636043456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylsttW53swa3nBL2KBDZ%2Fuploads%2F739if8tOgCmzvGpTiWDv%2Fimage.png?alt=media&amp;token=1aa14e24-487a-4ba4-be74-101b8d007474" alt=""><figcaption></figcaption></figure>
6. Repeat the process for other images, buttons, and text elements<br>

   <figure><img src="https://2636043456-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylsttW53swa3nBL2KBDZ%2Fuploads%2FPgU7J58xa6Ncej8kB4WF%2Fimage.png?alt=media&amp;token=6ba5bea6-f013-4935-b6e5-6e081e9522dd" alt=""><figcaption></figcaption></figure>
7. Use the **eyedropper tool** (pipette) to pick a color from any image or reference<br>

   <figure><img src="https://content.gitbook.com/content/ylsttW53swa3nBL2KBDZ/blobs/hLFYbDh2Kyhm07b5CpAk/image.png" alt=""><figcaption></figcaption></figure>

### How to Reskin / Add the backgrounds

1. To <mark style="color:orange;">**reskin / add**</mark> backgrounds, go to the <mark style="color:green;">**Sprites**</mark> -> <mark style="color:green;">**backgrounds**</mark> folder and <mark style="color:orange;">**replace / add**</mark> PNG files of the same size.
2. To <mark style="color:orange;">**change the background**</mark> in the <mark style="color:orange;">**main scene**</mark>, go to <mark style="color:green;">**Sprites folder**</mark> and replace `main-background.png` with your own background of the same size.