# Themes

An existing theme can be picked and applied to apps. Also - users can create a new theme using Platform Settings→Themes.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F3iOYmMjiE1KCdz6pCc4a%2Fimage.png?alt=media&#x26;token=fc0b9038-7a15-46d4-993c-9553e1f902ee" alt=""><figcaption></figcaption></figure>

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FL6WVIDX95VUZoinT3dLc%2Fimage.png?alt=media&#x26;token=6aea1e4c-5725-4350-840d-ad0e1bd6ca32" alt=""><figcaption></figcaption></figure>

#### Edit

Displays the style properties of the theme for users to edit and save.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-ed2cef52b02f663a782274d85d04b61ae4619053%2Fimage%20(304).png?alt=media" alt=""><figcaption></figcaption></figure>

| Property                         | Description                                                                                   |
| -------------------------------- | --------------------------------------------------------------------------------------------- |
| **Main Colors**                  |                                                                                               |
| Brand Color (primary)            | Applied to most components. Choose the right color the decide the brand image and recognition |
| Canvas Color (canvas)            | Sets the default background color to the app                                                  |
| Container Color (primarySurface) | Sets the default background color to the widgets like table, grid on the app                  |
| **Text Color**                   |                                                                                               |
| Light Text Color (textLight)     | Sets the color of the text when the background color of the app is dark                       |
| Dark Text Color (textDark)       | Sets the color of the text when the background of the app is light                            |
| **Border Radius**                |                                                                                               |
| Border Radius (borderRadius)     | Specifies the border radius for the widgets of the app                                        |
| **Margin**                       |                                                                                               |
| Margin (margin)                  | Defines the margin number for most of the components of the app                               |
| **Padding**                      |                                                                                               |
| Padding (padding)                | Decides the default padding space among the components                                        |
| **Grid Columns**                 |                                                                                               |
| Grid Columns (gridColumns)       | Sets the default number of columns used by the containers of the app                          |

#### Options

Following are the options that the user could work on a theme.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-c8822c5f488ee29a1f399acf4ae021c0601dd266%2Fimage%20(303).png?alt=media" alt=""><figcaption></figcaption></figure>

| Option               | Description                                  |
| -------------------- | -------------------------------------------- |
| Set as Default Theme | Make the theme the default for the workspace |
| Rename               | Alter the name of the theme                  |
| Duplicate Theme      | Create a copy of the theme                   |
| Delete               | Remove the theme from the workspace          |

## Theme Preview

Shows users a small preview of the theme, after the modifications to the colors and other properties previously. This is shown at the bottom of the edit page of the theme.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fhnq1JTAXddaXXH0G6mzd%2Fimage.png?alt=media&#x26;token=a8c57735-0f01-4726-8101-bdfc39b58231" alt=""><figcaption></figcaption></figure>

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2Fgit-blob-bf512659f13dd950df45680dae3d38917674ac1e%2Fimage%20(9)%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
A detailed manual on [Themes and its applications](https://docs.appizap.ae/build-apps/style-theme-and-usability) is provided here
{% endhint %}

### Chart Style

Please provide the JSON code necessary to style the chart. The [ECHART](https://echarts.apache.org/en/theme-builder.html) library is a valuable resource for additional information on how to customize the appearance of the chart using CSS.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2F1cguWiO311NA3HUNrrCb%2Fimage.png?alt=media&#x26;token=161813eb-b879-42a3-bc90-e8b8d156576c" alt=""><figcaption></figcaption></figure>

Sample charts are displayed for previewing purposes under the code section.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FwlBEgOuqhPY3ZPKjLRK1%2Fimage.png?alt=media&#x26;token=55bb271d-e19a-4bb6-b92d-2c2cfb76af9f" alt=""><figcaption></figcaption></figure>