# Theme Designer

**Theme Designer** is a tool in ONEWEB that allows users to **create, customize, and manage visual themes** for **mobile applications**.\
Themes define the overall look and feel of an app, including colors, styles, and UI behavior across common components.

With Theme Designer, users can:

* Design custom themes aligned with brand identity
* Configure themes for different **resource classifiers**
* Instantly visualize how color and style changes affect UI elements

***

### Open Theme Designer

1. Open **Page Designer**
2. Click the **Theme Designer** icon ![](https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FkkU10DWavZNnmFs0xvGK%252Fimage.png%3Falt%3Dmedia%26token%3D791775fc-e28f-4d85-8a7a-df1757305d54\&width=300\&dpr=3\&quality=100\&sign=e565779d\&sv=2) from the top menu

***

### Create a New Theme

1. Click **Create New Theme**\
   \&#xNAN;*(You can also select an existing theme to edit it)*
2. Enter a **Theme Name**
3. Click **Start Design**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FOdB5dw8sS1d2E9PELe7e%2Fimage.png?alt=media&#x26;token=c9e8cbf2-d8c9-429d-8956-a90cc70844f5" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Create a new theme</em></p>

***

### Design Theme Properties

Theme Designer allows you to configure **14 UI categories** along with a **Default Theme**.\
Each category controls styling for specific UI components (e.g. buttons, headers, backgrounds).

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Ft5LtyXyejlP0aGjNbDYM%2Fimage.png?alt=media&#x26;token=159d272a-71ec-4649-981c-908cb11ee538" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Default theme and categories view</em></p>

As you modify color or style values, Theme Designer immediately reflects the changes on common UI elements, helping you preview the impact.

***

### Save Theme

When you finish designing:

1. Click **Save**
2. The new theme appears in the **Theme List**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FgclCmBqw2xrgTFE10vYq%2Fimage.png?alt=media&#x26;token=76f4d92c-2167-4819-8d72-f21f66eae3db" alt=""><figcaption></figcaption></figure>

<p align="center"><em>New theme visible in theme list</em></p>

***

### Apply Theme to a Mobile Application

Themes are applied at the **mobile application level**.

#### Step 1: Open Application Settings

1. Open the **Mobile Application**
2. Click **Settings**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FzW2ev5uSOwHZImTpMm1P%2Fimage.png?alt=media&#x26;token=ed98bd2c-c5b7-4f0a-82b8-3380597ea8a7" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Open mobile application settings</em></p>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FouBFMv7wpcDB0cjfTHt6%2Fimage.png?alt=media&#x26;token=d08ff252-42bc-45ba-a17f-4124bce1f918" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Application settings screen</em></p>

***

#### Step 2: Select Theme

1. Locate the **Theme** field
2. Choose the desired theme from the list

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FMB6yP4m1KHMrlymFhy8f%2Fimage.png?alt=media&#x26;token=b048905a-58ac-4339-8b1c-10108a08136c" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Select theme in Theme field</em></p>

3. Click **Update**

***

### Preview Theme in Action

After applying the theme:

1. Open a page in Page Designer
2. Drag and drop UI components
3. The new theme styles are applied automatically

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F8TFYFQW91WIiT31cbNmc%2Fimage.png?alt=media&#x26;token=288e0d07-bcaf-4d66-9211-26ebcf818b04" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Theme applied to page components</em></p>

***

### Design Perspective

As part of **Page Designer best practices**:

* Use Theme Designer to maintain **consistent mobile UI branding**
* Define theme colors before designing pages
* Test themes with common components (buttons, headers, tabs)
* Keep contrast and accessibility in mind when choosing colors

Theme Designer helps deliver **visually consistent, brand‑aligned mobile applications** without manual styling.


---

# 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.onewebstack.com/building-apps/ui-page-designer/ux-ui-components/pages/page-features/theme-designer.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.