> For the complete documentation index, see [llms.txt](https://docs.uniramp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.uniramp.com/product/widget/theme-uniramp-widget.md).

# Theme Uniramp Widget

We understand how crucial it is for our partners to maintain brand consistency within their applications. This ensures they can deliver a cohesive and seamless experience. To support this, we developed a theming engine that can adapt to any style or design.

**The following properties are customizable:**

<table><thead><tr><th>Query Params</th><th width="567">Description</th></tr></thead><tbody><tr><td><strong>Primary Color</strong></td><td>This color is used as the dominant color of your widget, affecting areas like buttons and highlights.</td></tr><tr><td><strong>Secondary Color</strong></td><td>A complementary color that will be used for accents and minor elements.</td></tr><tr><td><strong>Primary Text</strong></td><td>The main text color for headlines or important information.</td></tr><tr><td><strong>Secondary Text</strong></td><td>Color used for secondary information, such as descriptions or labels.</td></tr><tr><td><strong>Container Color</strong></td><td>Background color of the container that wraps the entire widget.</td></tr><tr><td><strong>Card Color</strong></td><td>Defines the background color for individual cards inside the widget.</td></tr><tr><td><strong>Element Border</strong></td><td>Controls the color of the borders around buttons, cards, or containers.</td></tr><tr><td><strong>Container Border</strong></td><td>The border around the entire widget container.</td></tr></tbody></table>

### Step-by-Step Setup Instructions

1. **Install the widget**: Add the widget code to your project.
2. **Open the theme builder**: Use the following link to access the theme builder and style your widget: [Click here ](https://theme.uniramp.io/)to open the theme builder.
3. **Apply and Preview**: Choose your colors and settings, then apply them to see live changes.
4. **Integrate**: Finalize the design and add it to your web app.

### Best Practices

* **Readability**: Use high contrast colors for text and backgrounds.
* **Consistency**: Avoid using too many different colors, especially for key elements like buttons.

### Default Themes

<div align="left"><figure><img src="/files/FzbZqoaWB8k2qQU2nWuG" alt=""><figcaption></figcaption></figure> <figure><img src="/files/sVejfqwyj2ME8pffLNyt" alt=""><figcaption></figcaption></figure></div>

## Use the theme builder

Click on the following link to use our theme builder and style your widget to your preference.

{% embed url="<https://theme.uniramp.io/>" %}