> For the complete documentation index, see [llms.txt](https://docs.satisfilabs.com/resource-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.satisfilabs.com/resource-center/ai-agent-engine/enhance-the-chat-experience/page-themes/copy-of-adjust-page-themes.md).

# 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/response-types/prewritten-plus-responses/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