> For the complete documentation index, see [llms.txt](https://crocode.gitbook.io/elemento-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://crocode.gitbook.io/elemento-docs/theme-settings/colors.md).

# Colors

The Elemento theme includes a flexible color system built around **color schemes**. Each color scheme contains grouped color roles used throughout various components of your store. You can create multiple color schemes and apply them to different sections or blocks.<br>

<figure><img src="/files/FxindDUda6uONlJOSqIX" alt=""><figcaption></figcaption></figure>

#### What Is a [Color Scheme](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#colors)?

A [color scheme](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/theme-settings#colors) is a named set of colors you define once and reuse throughout your theme. Instead of setting colors manually for each section, you assign a color scheme, which controls the section’s background, text, buttons, and other elements.

#### How to Edit a Color Scheme

1. Go to **Online Store → Themes**, and click **Customize** on the Elemento theme.
2. In the **Theme Editor**, go to **Theme Settings → Colors**.
3. Select an existing color scheme or create a new one.
4. Adjust the color values under each category.

<figure><img src="/files/H8d0na8GSlZYrIqYuOv2" alt=""><figcaption></figcaption></figure>

#### Color Roles in Each Scheme

Each color scheme includes the following groups and values:

**Main**

* **Primary** — Used for key UI highlights
* **Secondary** — Supporting accent color
* **Tertiary** — Supporting accent color

**Background**

* **Primary** — Main background for sections
* **Secondary** — Used for layered surfaces or elements
* **Background Gradient** — Optional gradient overlay

**Text Content**

* **Primary Text** — Default body text and headings
* **Secondary** — For subtext or supporting content
* **Tertiary** — For de-emphasized or less important labels

**Buttons**

* **Background** — Default button fill
* **Text** — Button label color

**Scroll Bars**

* **Thumb** — The draggable scroll indicator
* **Track** — The background of the scrollbar

**State Colors**

Used to convey system states like success or error:

* **Disabled** — For inactive elements
* **Success** — For positive state messages or icons
* **Warning** — For alerts or cautions
* **Error** — For error messages or indicators

**Rating**

* **Primary** — Active star/fill color
* **Secondary** — Inactive or background rating color

**Placeholders**

* **Outline** — Used for placeholder content outlines
* **Background** — Used for placeholder content backgrounds

**Backdrops**

* **Modal** — Overlay background behind modals
* **Section** — Optional backdrop behind certain sections or overlays

***

#### Tips

* Keep contrast in mind for accessibility (e.g., text over background).
* Use consistent Primary/Secondary logic across schemes to reduce visual clutter.
* Use the Preview pane in the Theme Editor to test your changes in context.