# Adjust Page Themes

## Adjust Chat Colors <a href="#step-1-add-the-logo-as-header-image" id="step-1-add-the-logo-as-header-image"></a>

To adjust your page header, submit a ticket to our support team. Be sure to include the color codes and indicate which page(s) you'd like the changes applied.&#x20;

In addition to reviewing the [Field Definitions](/resource-center/ai-agent-engine/enhance-the-chat-experience/page-themes/field-definitions.md),  we recommend looking at the commonly adjusted color fields below:

{% tabs %}
{% tab title="Primary Colors" %}

* headerBg
* buttonIconColorHover
* buttonPrimaryBgColorHover
* buttonSecondaryBgColorHover
* buttonLinkBgColorHover
* buttonQuickReplyBorderHover
* buttonQuickReplyTxtColorHover
* chatButtonBackground
* chatButtonBackgroundMobile
* chatButtonBackgroundColorMobile
  {% endtab %}

{% tab title="Buttons and Quick Replies Colors" %}

* buttonPrimaryTxtColor
* buttonPrimaryBgColor&#x20;
* buttonSecondaryTxtColor&#x20;
* buttonSecondaryBgColor
* buttonLinkTxtColor&#x20;
* buttonLinkBgColor&#x20;
  {% endtab %}

{% tab title="Contrast Colors" %}

* headerTextColor
* buttonPrimaryTxtColorHover
* buttonSecondaryTxtColorHover
* buttonLinkTxtColorHover
* buttonQuickReplyBgColorHover
* chatButtonFocusColor
* chatButtonFontColor
* chatButtonFontColorMobile
  {% endtab %}
  {% endtabs %}

## Variable Theme Settings <a href="#step-5-variable-theme-settings" id="step-5-variable-theme-settings"></a>

The following color fields apply to the chat's send button:

<figure><img src="/files/fHzv1gu5zTKznkL9wLIf" alt="" width="278"><figcaption><p>"Send" Button</p></figcaption></figure>

* buttonIconColor - typically looks best at the primary color
* buttonIconColorHover - typically looks best as a secondary color

The following colors apply to the chat's minimize button:

<figure><img src="/files/vBkxZK59wt9NO3uE5EJ1" alt="" width="370"><figcaption><p>"Minimize" Header Icon</p></figcaption></figure>

* headerIconColor - typically looks best at the contrast color
* headerIconColorHover - typically looks best as a secondary color


---

# 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.satisfilabs.com/resource-center/ai-agent-engine/enhance-the-chat-experience/page-themes/adjust-page-themes.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.