# Color scheme

### How to set the color scheme of your app?

You can define how your app looks by setting a custom color scheme. This controls the colors used in the header, footer, buttons, icons, and other interactive elements.

{% embed url="<https://scribehow.com/shared/Color_Scheme__1DXt-8zBScGsEJHKMPmpZQ>" %}

**Step 1: Open the color scheme settings**

* Go to the [**Theme screen**](https://app.appmysite.com/app/theme) from the Design section in the side menu
* Click on the Color scheme button at the top of the screen

**Step 2: Choose how to configure colors**

* "Your app colors" option lets you manually select and apply your own brand colors
* "Preset colors" option provides a set of ready-made combinations you can instantly use
* "Get my website’s colors" option allows you to extract and apply colors from your connected website

{% hint style="warning" %}
Click "Retry" to fetch a new set of colors from your website using the "Get my website’s colors" feature.
{% endhint %}

**Step 3: Set each color in your palette**

* Base color defines the main color used across the header, bottom bar, and background elements
* Contrast color is used for text and icons that appear on top of the base-colored areas
* Selection color is applied to selected items like tabs, active icons, and highlights
* Highlight color is used for call-to-action buttons and other accent elements between the header and footer

**Step 4: Save or reset your selection**

* Click Done to save your selected colors
* Click "Reset" to revert all changes
* Click Cancel to discard changes and exit

{% hint style="success" %}
Preview the design on the demo app or the [**Preview emulator.** ](/app/preview.md)
{% endhint %}


---

# 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.appmysite.com/app/design/theme/color-scheme.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.