# Colors

You can change the **Colors** of elements across your store, including general colors, header colors, footer colors, and product colors.

In the theme editor, click the **Theme settings** icon, then click to open the **Colors** tab.

{% hint style="info" %}
We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
{% endhint %}

## Color schemes

***

A **color scheme** consists of a set of colors that you can use for sections throughout your store. Color schemes help you create consistent palettes.

* Customize and create new color schemes in theme settings
* Apply color schemes to sections in section settings

<div><figure><img src="/files/sXi5uhmtUdleBi713l6u" alt=""><figcaption></figcaption></figure> <figure><img src="/files/IbjgGmxuq50rAajoF4cv" alt=""><figcaption></figcaption></figure></div>

### Edit and add color schemes

***

In **Theme settings**, click a color scheme to edit its color options. Click **(+) Add scheme** to add a new color scheme.

#### Color scheme options

Every color scheme has the following color options.

<table><thead><tr><th width="192">General colors</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Background</mark></td><td>The background of the section, which spans the full height and width.</td></tr><tr><td><mark style="color:blue;">Background gradient</mark></td><td>Some sections can use a gradient background instead of a solid color background.<br><br>You can choose the style, angle, position, and opacity of the gradient. See Shopify's <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>All text included in the section.</td></tr><tr><td><mark style="color:blue;">Lines and borders</mark></td><td>All lines and borders that appear between or within sections.</td></tr><tr><td><mark style="color:blue;">Accent</mark></td><td>Special design elements in sections</td></tr><tr><td><mark style="color:blue;">Accent foreground</mark></td><td>Text or icons that overlay accent elements</td></tr><tr><td><strong>Buttons</strong></td><td></td></tr><tr><td><mark style="color:blue;">Solid buttons</mark></td><td>The background and text colors for buttons with solid style</td></tr><tr><td><mark style="color:blue;">Outline buttons</mark></td><td>The background, text, and border colors for buttons with outline style</td></tr><tr><td><mark style="color:blue;">Buttons with icon</mark></td><td>The background and foreground colors for buttons with icons</td></tr></tbody></table>

> Note: Solid and Outline button styles use the **Accent** and **Accent foreground** colors as the hover colors.

## Popovers, Modals, and Drawers

***

Select a color scheme to apply to **Popovers, Modals,** and **Drawers**.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Popovers and modals</mark></td><td>Select a color scheme for popups and modals, such as popups and information popups.</td></tr><tr><td><mark style="color:blue;">Drawers</mark></td><td>Select a color scheme for menus and cart drawers.</td></tr></tbody></table>

## Products

***

Select colors for elements used in product listings and product pages.

<table><thead><tr><th width="180">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Sale</mark></td><td>The 'Sale' badge on product cards.</td></tr><tr><td><mark style="color:blue;">Sold out</mark></td><td>The 'Sold out' badge on product cards.</td></tr><tr><td><mark style="color:blue;">Low inventory</mark></td><td>The low inventory message on product cards.</td></tr><tr><td><mark style="color:blue;">In stock</mark></td><td>The 'In stock' text on product cards.</td></tr></tbody></table>

## Notifications

***

Select colors for notification messages in forms.

<table><thead><tr><th width="184">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Success</mark></td><td>Success messages for forms.</td></tr><tr><td><mark style="color:blue;">Error</mark></td><td>Error messages for forms.</td></tr></tbody></table>


---

# 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://help.fluorescent.co/eclipse/theme-settings/colors.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.