> 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/adjust-page-themes.md).

# 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