> 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
{% 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.
***
### 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
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="success" icon="lightbulb" %}
**Accent is the most important color in the theme.** It propagates automatically to star ratings, swatch outlines, selected filter tags, and other UI highlights. Set it once and the whole store stays coherent.
{% 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 %}
***
### 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 %}
***
{% hint style="success" icon="sparkles" %}
**Pro tip:** Enable **Use accent color for text selection** in the Extra 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 dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://staylime.com/docs/avante-themes/theme-settings/colors.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.