> For the complete documentation index, see [llms.txt](https://docs.solarvis.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.solarvis.co/solarvis-modules/ai-sales-assistant/theme.md).

# Theme

## Purpose of This Page <a href="#purpose-of-this-page" id="purpose-of-this-page"></a>

Use this page to define the colors, background style, and typography used by the AI Sales Assistant. The live preview allows you to review your changes before applying them, helping ensure the assistant blends seamlessly into your website.

## What You Can Do Here <a href="#what-you-can-do-here" id="what-you-can-do-here"></a>

* Select a preset theme with predefined header colors and background patterns
* Use your company branding or define custom primary and secondary colors
* Choose the font family used throughout the AI Sales Assistant
* Preview the assistant in light or dark mode before saving
* Save the theme configuration for your website

## How It Works <a href="#how-it-works" id="how-it-works"></a>

The Theme page is divided into two areas:

* **The configuration panel** on the left is where you customize the assistant's appearance.
* **Live preview** on the right is where you can immediately see how the selected theme will look on your website.

Most visual changes are reflected instantly in the preview, allowing you to evaluate the assistant before saving.

{% hint style="info" %}
The live preview is for visualization only. Your website is not updated until you select **Save**.
{% endhint %}

## Configuration Panel <a href="#configuration-panel" id="configuration-panel"></a>

The assistant’s appearance is customized in that area easily and quickly.

### Theme Presets <a href="#theme-presets" id="theme-presets"></a>

Theme presets provide ready-made combinations of header colors and conversation background patterns.

Each preset defines:

* Header color style
* Conversation background pattern

Available preset combinations include:

* Primary or Secondary header with no background pattern
* Primary or Secondary header with a plus (+) pattern
* Primary or Secondary header with a dots pattern

Any preset can be selected to immediately update the live preview. The selected preset is indicated with a checkmark.

### Company Colors <a href="#company-colors" id="company-colors"></a>

Enable **Use company colors** to automatically use the brand colors configured in your company settings.

When this option is enabled:

* The assistant inherits your organization's primary and secondary brand colors.
* Manual color editing is disabled.

This is the recommended option if you want the assistant to remain consistent with your website branding.

### Custom Colors <a href="#custom-colors" id="custom-colors"></a>

Disable **Use company colors** to define a custom color scheme specifically for the AI Sales Assistant.

**Primary Color** - defines the primary branding color used throughout the assistant.

**Secondary Color -** defines the secondary accent color used by the selected theme.

For both colors, you can:

* Enter a hexadecimal color value
* Select a color using the color picker

{% hint style="info" %}
Which color appears in the assistant header depends on the selected preset theme. Presets using the **Primary Header** display the primary color, while **Secondary Header** presets display the secondary color.
{% endhint %}

### Font Family <a href="#font-family" id="font-family"></a>

The **Font family** is used in a dropdown to select the typography used throughout the AI Sales Assistant interface.

Available fonts include:

* system-ui
* Inter
* Roboto
* Open Sans
* Poppins
* Lato
* Montserrat

The selected font is immediately reflected in the live preview.

## Live Preview Panel <a href="#live-preview-panel" id="live-preview-panel"></a>

The preview panel on the right side of the page displays how the AI Sales Assistant will appear when embedded on your website.

The preview updates automatically as you modify:

* Theme preset and background pattern
* Colors
* Font family

{% hint style="info" %}
**Note:** Dark mode affects the preview only. It does not enable dark mode for your website or change the saved theme configuration.
{% endhint %}

***

## Related Pages <a href="#related-pages" id="related-pages"></a>

* [AI Sales Assistant](/solarvis-modules/ai-sales-assistant.md)
* [General Settings](/solarvis-modules/ai-sales-assistant/general-settings.md)
* [Cost Configuration](/solarvis-modules/ai-sales-assistant/cost-configuration.md)
* [Regulations](/solarvis-modules/ai-sales-assistant/regulations.md)
* [Cost Configuration Test](/solarvis-modules/ai-sales-assistant/cost-configuration-test.md)
* [Training](/solarvis-modules/ai-sales-assistant/training.md)
* [Greeting](/solarvis-modules/ai-sales-assistant/greeting.md)
* [AI Sales Assistant End-User Journey](/solarvis-modules/ai-sales-assistant/ai-sales-assistant-end-user-journey.md)

If you encounter any issues, [feel free to contact us.](https://solarvis.co/en/company/contact)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.solarvis.co/solarvis-modules/ai-sales-assistant/theme.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.