# Copy of Adjust Page Themes

{% hint style="warning" %}
If you do not have access to the **Page Themes section** of the dashboard, administrators can submit a ticket to request access is enabled.  
{% endhint %}

## Adjust Header Image <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 image file and indicate which page(s) you'd like the header image applied.&#x20;

{% hint style="info" %}
Before submitting a ticket, ensure to review the image specs and example section here: [Images & GIFs](/resource-center/ai-agent-engine/manage-your-content/enrichments/images-and-gifs.md#image-specs)
{% endhint %}

## Adjust Chat Colors <a href="#step-2-update-the-primary-color" id="step-2-update-the-primary-color"></a>

<div data-full-width="true"><figure><img src="/files/HjsHnRql9BNHhNt25FN0" alt=""><figcaption><p>Page Theme Editor</p></figcaption></figure></div>

1. In the Satisfi Labs dashboard, go to **Studio -> Pages Themes**
2. Select the Chat Theme you wish to adjust
3. 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 %}

4. Click **Save** to apply the changes

## 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/copy-of-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.