# 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/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uniramp.com/product/widget/theme-uniramp-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.