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

# Setup a Theme

> Set up and customize themes in Userpilot to control colors, fonts, and styles, ensuring your in-app experiences stay consistent and on-brand.

## Overview

Userpilot allows you to customize your theme to match your brand’s identity effortlessly. You can control colors, fonts, button styles, and other design elements to ensure a consistent user experience. With flexible styling options, you can maintain brand consistency across all in-app experiences without needing constant design updates.

## Themes

Whether you want a uniform look across all UI patterns or unique styling for specific components, the theme settings provide full control over the appearance of your flows. This level of customization ensures that every user interaction feels intuitive, professional, and on-brand.

You can either apply general theme settings that will take effect on all types of UI patterns or simply go to each UI pattern and customize the look and feel for it.

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.17.53AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=aac0cc8b6e46e2ed8bed0744354a4c9f" alt="" width="2724" height="1368" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.17.53AM.png" />

## **Customizing Your Font** 

To customize the font of your content, navigate to Configure > Themes > Edit, then scroll down to the Font section. Click on the drop-down menu, select Custom, and choose Add New Custom Font to apply your preferred Font.

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.21.48AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=4daa96b538d108d362fb86473f1bb3ba" alt="" width="2722" height="1322" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.21.48AM.png" />

A pop-up will show so you can name the Font Family. The Custom CSS will be set for you in 'Comment' Mode until you remove the slashes (/) to make them effective. 

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.24.02AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=dcafe0f454d07ec9b40aaaa0f9337979" alt="" width="1196" height="1056" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.24.02AM.png" />

Once the Slashes (/) are removed, you can click on the Add Font Button. 

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.24.39AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=419f988734df1d747cf09f87f50a176c" alt="" width="1190" height="1046" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.24.39AM.png" />

You will be able to see a preview of the changes that you have made to the font on the right side tab. 

<img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.26.07AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=4fcdb9f9e6e3f2f80b14c708c7fe1a2d" alt="" width="2740" height="1178" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.26.07AM.png" />

And lastly, don't forget to click on Save to keep the changes. 

### FAQs

<AccordionGroup>
  <Accordion title="How can i remove the 'X' icon on the Surveys?" defaultOpen="false">
    Yes, you can remove the Survey close/dismiss button using the Survey Custom CSS as shown below:

    <img src="https://mintcdn.com/userpilot/heoTLTAWD74i-7CB/in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.32.20AM.png?fit=max&auto=format&n=heoTLTAWD74i-7CB&q=85&s=2888fb486ce8f736fb2cba597a0cd871" alt="" width="2688" height="1156" data-path="in-app-engagement/flows/getting-started/assets/images/Screenshot2025-03-03at3.32.20AM.png" />
  </Accordion>

  <Accordion title="Will changing the text colour on a tooltip from the builder affect the main theme associated with it? " defaultOpen="false">
    No, the changes you make to the flow from the builder wouldn't affect/change the main theme associated with it.
  </Accordion>
</AccordionGroup>

<Frame>
  [**For any questions or concerns please reach out to support@userpilot.com**](mailto:support@userpilot.com)
</Frame>