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

# Colors

Define your store's color palette — from layout and typography to buttons, overlays, and pickup availability indicators.

{% hint style="info" %}
**Theme Editor → Theme settings → Colors**
{% endhint %}

### Every pixel, on brand

Color is the fastest lever you have for making a store feel like a real brand. Avante's color system is layered — a global palette for backgrounds and text, a dedicated three-color system for all interactive elements, and independent controls for overlays, gradients, and UI states. You can build a complete visual identity here without touching a line of CSS.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2F4ZSXY2JCdrcf6RC8nabe%2FGroup%202.jpg?alt=media&amp;token=f801b683-e43e-4825-857c-f4d842fa2a26" alt=""><figcaption></figcaption></figure>

***

### Buttons & links — your brand, every click

The **Buttons and links** section controls every interactive element on the storefront. Three colors do all the work:

* **Base** — text color on Solid style buttons (usually white or a dark neutral)
* **Accent** — the main brand color. Appears as the background of Solid buttons, the outline and text of Outlined buttons, and the accent highlight across the UI
* **Hover** — what the button looks like when customers mouse over it

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FX2Mb31UENd2ROdTi016k%2FGroup%2014.jpg?alt=media&amp;token=7c3ed664-26a4-48f9-8897-b6b5b7a82c1e" alt=""><figcaption></figcaption></figure>

A tight relationship between Accent and Hover (e.g. one shade darker or lighter) feels polished. A dramatic shift (e.g. black to brand red) creates high energy. Either works — the key is consistency.

{% hint style="warning" %}
**Accent does not cover everything that looks like a highlight.** A few elements carry their own color setting and will not follow Accent no matter what you set here — the most commonly missed one is **star ratings**, which are controlled by **Rating** in the **Extra** section further down this group.
{% endhint %}

***

### Accent headings & secondary text

**Enable accent color for headings** changes all H1–H4 headings across the store to your Accent color. It's a one-toggle way to push your brand color further into the layout — especially effective when your Accent is a strong, distinctive hue and your body text is neutral.

**Dim secondary text** slightly reduces the brightness of secondary text elements (captions, labels, helper text). Useful when your Text color is very dark and secondary elements are visually competing with primary content.

***

### Overlay — set the mood for drawers and modals

The overlay appears behind the cart drawer, menu drawer, and any modal window. It focuses attention on the drawer and signals "this is a separate context."

| Setting             | Effect                                                                    |
| ------------------- | ------------------------------------------------------------------------- |
| **Color**           | Tint of the backdrop — usually black or a brand dark                      |
| **Opacity**         | 40–60% is a common range; lower = softer, higher = more focused           |
| **Background blur** | Frosted-glass effect behind the overlay. Set to 8–16px for a premium look |

{% hint style="success" icon="lightbulb" %}
**Background blur** is a design detail that communicates quality without being obvious. It's widely used in luxury fashion and beauty stores. Set it to 0 if you want a clean, flat overlay.
{% endhint %}

{% hint style="info" %}
**Background blur disappears above 90% opacity.** At that point the backdrop is close to solid and there is nothing left to blur, so the theme hides the setting.
{% endhint %}

***

### Popup background — make dropdowns feel native

The **Popup background** color applies to search panels, dropdown menus, and modal windows. When set to a color close to your page background, these elements appear to float organically from the page rather than look like foreign UI.

* **Light store** → use near-white (`#f9f9f9`) or the same as your Background
* **Dark store** → use a slightly lighter shade of your Background (e.g. `#1a1a1a` on a `#121212` base)

***

### Compare-at price — control how sale prices look

The **Compare-at price color** setting controls how the original (struck-through) price is displayed next to a sale price. Three options:

* **Sale badge text** — matches the text color of your sale badge (automatic, no extra setup)
* **Sale badge background** — matches the background color of your sale badge (bold, high-contrast)
* **Custom** — set any hex color for full control

{% hint style="success" icon="lightbulb" %}
For most stores, the Sale badge text option creates the most coherent look since it ties the struck price visually to the badge.
{% endhint %}

***

### Buttons: burger and close

Two small groups sit between the overlay and the Extra section, and they only affect the theme's own icon buttons.

* **Burger button** — **Fill** draws the button on a filled background instead of leaving it bare, and **Shadow** adds a soft drop shadow from 0 to 30%
* **Close button** — **Shadow**, the same 0–30% control for the × button on drawers and popups

Both shadows are there for the same reason: when a button floats over a photograph, a little shadow keeps it readable regardless of what is behind it.

***

### Extra

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FBM8H0eCBbtlNtZIFyyIS%2FGroup%2014%20(3).png?alt=media&amp;token=d12e770d-e2e3-44f8-b7cf-626cbdf29b18" alt=""><figcaption></figcaption></figure>

Three colors that live outside the main palette because they carry meaning rather than branding:

<table data-search="false"><thead><tr><th>Setting</th><th>What it colors</th></tr></thead><tbody><tr><td><strong>Rating</strong></td><td>Star ratings on product cards and product pages. This is the only place to change them — Accent has no effect on stars</td></tr><tr><td><strong>Error</strong></td><td>Validation messages and error states in forms</td></tr><tr><td><strong>Success</strong></td><td>Confirmation messages, such as a successful newsletter signup</td></tr></tbody></table>

{% hint style="success" icon="lightbulb" %}
**Stars do not have to be yellow.** The theme ships with a neutral grey rather than the usual gold, so if your reviews look washed out, this is the setting to change. Pick something that reads clearly against your product card background.
{% endhint %}

{% hint style="success" icon="sparkles" %}
**Pro tip:** Enable **Use accent color for text selection** in the same section. When customers select text on your store, the highlight uses your brand color instead of the browser default blue. A tiny detail — but it shows up everywhere, and it signals that every interaction was considered.
{% endhint %}

***

### Pickup availability

Colors for the store pickup availability indicators shown on product cards and product pages. Requires [Store Selector](/docs/avante-themes/features-and-advanced-setup/store-selector.md) to be configured.

| Setting               | Description                                                            |
| --------------------- | ---------------------------------------------------------------------- |
| **Available text**    | Text color for "Available at \[store]" labels.                         |
| **Available icon**    | Color of the availability indicator dot when the product is available. |
| **Out of stock text** | Text color when the product is unavailable at the selected location.   |
| **Out of stock icon** | Color of the indicator dot when the product is unavailable.            |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/theme-settings/colors.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.