> For the complete documentation index, see [llms.txt](https://aidocs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aidocs.thunkable.com/app-design/color-schema.md).

# Color Schema

Color Schemas allow you to quickly apply a coordinated color palette to your project. Selecting a schema updates the primary colors used throughout your app interface, helping you maintain a consistent visual style without manually configuring individual components.

#### How to Apply a Color Schema

1. Open your project in **Thunkable AI**.
2. Click on **Theme**.
3. Browse the available palettes.
4. Click on a palette to apply it to your project.

The change is applied immediately and can be previewed in the **Preview** panel.

**Tip:** Hover over a theme to temporarily preview how it will look in your app before applying it. This lets you compare different color palettes without making permanent changes.

The currently applied theme is highlighted with an **Applied** label.

#### Available Schemas

Each schema provides a curated set of colors designed for different visual styles:

* **Base** – A neutral palette suitable for most applications.
* **Ocean Blue** – Cool blues for a calm, modern interface.
* **Forest** – Greens inspired by natural tones.
* **Sunset** – Warm oranges and browns for vibrant designs.
* **Earthy Tones** – Soft natural colors with a grounded feel.
* **Coral Sunset** – Coral and teal accents paired with dark neutrals.
* **Electric Magenta** – High-contrast magenta and deep purple for bold designs.
* **Monochrome** – Minimalist black, white, and grey palette.

### Customize Theme

Selecting **Customize This Theme** opens the Theme Editor, where you can fine-tune every color in your app.

#### Generate a Theme from Your Brand

If you already have a brand color, enter or select it in the **Brand Color** field and click **Generate Theme**.

Thunkable AI will automatically generate a cohesive color palette based on your brand color while maintaining visual harmony across your application.

***

### Editing Individual Colors

Select any color role (such as **Primary**, **Accent**, or **Background**) to edit it.

The section displays the colors currently used by your app, including:

* **Primary** – The main brand color used for buttons, headers, and key UI elements.
* **Accent** – A secondary color used for highlights and interactive elements.
* **Background** – The primary background color of the app.
* **Surface** – The background color used for cards, dialogs, and other elevated surfaces.
* **Text** – The primary text color.
* **Text 2** – A secondary text color used for supporting content.

Click on each color you would like to edit individually.

The editor provides:

* A visual color picker.
* A hue slider.
* Quick shade suggestions.
* Manual HEX color input.

Once you're satisfied with your changes, click **Apply** to save them or **Reset** to discard your current edits.

***

### Accessibility Indicators

Each color displays an accessibility rating to help you create readable interfaces.

* **AA** indicates the color combination meets recommended accessibility contrast guidelines.
* Lower contrast ratios (such as **2.6:1**) indicate that the color may not provide sufficient readability and should be adjusted for better accessibility.

***

### Undo Changes

If you recently applied a different theme or color, click **Undo** at the top of the Theme panel to revert your most recent change.

***

### Restore from History

At the bottom of the Theme panel, click **Restore from history** to open the **Versions** tab.

From there, you can browse previous versions of your project and restore an earlier version if you want to revert theme changes or recover a previous state of your app.

#### Notes

* Applying a new schema updates the project's theme colors but does not change existing custom styles you have manually applied to components.
* You can switch schemas at any time to experiment with different looks.