# Design theme

### How to design the theme of your app?

The Theme section in your app dashboard allows you to customize the look and feel of your app’s interface by adjusting header and button styles. These settings help you maintain consistent branding and enhance the overall visual experience for your app users.

{% embed url="<https://scribehow.com/viewer/Design_theme__B9xp2wumQVWzyToYp6eNtA>" %}

#### Step 1: Go to the theme settings

* From the side menu, click on Design
* Open the [Theme screen](https://app.appmysite.com/app/theme) to customize various visual elements of your app

#### Step 2: Customize fonts

* Click on the Heading font field to select a font style for all headings in your app
* Click on the Paragraph font field to select a font style for all body text

Use the search bar or scroll through the list to select your preferred font for each field.

{% hint style="success" %}
Choose from over 7000 fonts to personalize your app's typography.
{% endhint %}

{% hint style="warning" %}
The selected font will apply across the entire app, including the bottom bar, menu, pages, posts, and more.
{% endhint %}

#### Step 3: Customize the header style

* Header background color sets the background color of your app’s header to match your brand palette
* Header separator color defines the color of the thin line under the header, helping visually separate it from the content area
* Header text color allows you to select the color of screen titles that appear in the header
* Header icon color applies to the back, menu, and search icons within the header

{% hint style="success" %}
Customize your header elements to create a clean, consistent navigation experience for your app users.
{% endhint %}

#### Step 4: Customize the button style

* Button background color defines the background color used for all primary buttons in the app
* Button text color sets the text color that appears on these buttons
* Button shape lets you choose from three styles
  * Square
  * Squircle (square with slightly rounded corners)
  * Circle

{% hint style="success" %}
Visually appealing and well-styled buttons help increase engagement and make important actions stand out.
{% endhint %}

To customize the icons used in your app, visit the guide linked below:

{% content-ref url="/pages/L19dbczaBhNcJ8pv7zCE" %}
[Upload icons](/app/design/theme/upload-icons.md)
{% endcontent-ref %}

To set up the overall color scheme of your app, visit the color scheme guide:

{% content-ref url="/pages/9VoINBO3Dtv461f8NNZC" %}
[Color scheme](/app/design/theme/color-scheme.md)
{% endcontent-ref %}

{% 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/design-theme.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.