> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userpilot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Style Checklist Widget

> To pick out a Theme for your Checklist, go to Style. You can pick out either a Light or Dark Theme. You also have the option to create your theme.

## Style Widget

To pick out a Theme for your Checklist, go to **Style**. You can pick out either a **Light** or **Dark** Theme. You also have the option to create your theme.

<img src="https://mintcdn.com/userpilot/AID1pCY-bQgJdWy3/in-app-engagement/checklists/assets/images/file-5xhL9NEjm2.png?fit=max&auto=format&n=AID1pCY-bQgJdWy3&q=85&s=31f74dfe8bbf2951560800dbb6feade2" alt="" width="1698" height="276" data-path="in-app-engagement/checklists/assets/images/file-5xhL9NEjm2.png" />

The **Widget** gives you the option to add an Icon to your checklist or upload and add your own.

<img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/checklists/assets/images/file-dSLuLNGY25.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=7e431ff3f0dadd586dfe6f57e0eed858" alt="" width="1730" height="1220" data-path="in-app-engagement/checklists/assets/images/file-dSLuLNGY25.png" />

Next, it's time to pick out your Text Font and Color. You can even [add your own font](https://docs.userpilot.com/in-app-engagement/flows/getting-started/themes#customizing-your-font)

<img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/checklists/assets/images/file-TGXtdUl8Ra.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=04d67a242b177af39d620b05d7308230" alt="" width="1676" height="438" data-path="in-app-engagement/checklists/assets/images/file-TGXtdUl8Ra.png" />

And finally, the **Close Button**. This feature is optional, but if you do activate it, it gives you the option of either minimizing or dismissing your Checklist.

<img src="https://mintcdn.com/userpilot/AID1pCY-bQgJdWy3/in-app-engagement/checklists/assets/images/file-6IyToDXb4M.png?fit=max&auto=format&n=AID1pCY-bQgJdWy3&q=85&s=c72a8970f79c6d18f5edb92e445f4021" alt="" width="1682" height="440" data-path="in-app-engagement/checklists/assets/images/file-6IyToDXb4M.png" />

## Checklist Custom CSS

You can now customize the Checklist using Custom CSS from the themes section as per your use case.

<img src="https://mintcdn.com/userpilot/wfz9MZaMqtGS7WBI/in-app-engagement/checklists/assets/images/file-yYxAEio8VL.png?fit=max&auto=format&n=wfz9MZaMqtGS7WBI&q=85&s=ae7a09a46a6898db2c1c63fe00c5cbeb" alt="" width="2728" height="1406" data-path="in-app-engagement/checklists/assets/images/file-yYxAEio8VL.png" />

**For example:**

* You can change the color of a task's title and description once it's completed.
* You can update the Checklist beacon's color to reflect when all tasks are completed.

<img src="https://mintcdn.com/userpilot/AID1pCY-bQgJdWy3/in-app-engagement/checklists/assets/images/file-8ECiBvfLIW.png?fit=max&auto=format&n=AID1pCY-bQgJdWy3&q=85&s=c87c08f0baa0d0ce71ca923d438b64aa" alt="" width="2702" height="1410" data-path="in-app-engagement/checklists/assets/images/file-8ECiBvfLIW.png" />

<img src="https://mintcdn.com/userpilot/AID1pCY-bQgJdWy3/in-app-engagement/checklists/assets/images/file-IXqFXTjRLp.png?fit=max&auto=format&n=AID1pCY-bQgJdWy3&q=85&s=566681e9916fbd43dac9ad82b98f3f9d" alt="" width="2714" height="1398" data-path="in-app-engagement/checklists/assets/images/file-IXqFXTjRLp.png" />

* You can also customize the height and width of the beacon/widget and add some padding to the text/progress bar as per your preferences.
