> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/slab/getting-started/global-settings/colors-and-schemes.md).

# Colors

Slab color styling starts in **Theme settings > Colors**. Merchants pick a small set of global colors, then Slab generates additional color tokens (such as accents, shades, neutral, and plain) that sections and blocks can use through color scheme settings.

## How to change theme colors

{% stepper %}
{% step %}

#### Configure base colors

* Open **Theme settings > Colors**.
* Select and edit your base colors such as Background, Foreground, Error, Success, Mobile bar, and Overlay background.
  {% endstep %}

{% step %}

#### Configure color schemes

* Open **Theme settings > Colors**.
* Under **Schemes**, edit **Scheme 1** and **Scheme 2** first.
* Click **Add Scheme** if you need more brand variations.
* For each scheme, set all six fields: background, foreground, border, hover background, hover foreground, and hover border.
  {% endstep %}

{% step %}

#### Apply colors to your sections and blocks

* Open the theme editor and select the block or section you'd like to edit
* Find the color settings and select **Base** or **Custom** for the **Type** option
* Selecting **Base** will show generated base colors such as Accents and Shades.
* Selecting **Custom** will let you choose any color scheme
  {% endstep %}
  {% endstepper %}

### Generated color options

After you choose your global colors, Slab automatically creates extra color variations so sections and blocks stay visually consistent.

* **Accent 1/2/3:** Layered overlay tones used for depth and emphasis.
* **Shade 1/2/3:** Lighter or darker background steps for subtle contrast.
* **Main:** The main emphasis style for a component, based on the body foreground color.
* **Plain:** A softer, low-emphasis surface based on the body background.
* If your body background is light, Slab creates darker overlays and shade tones.
* If your body background is dark, Slab creates lighter overlays and shade tones.

## Color settings

### Base

These settings define your store's base color system.

| Setting    | What it controls                                                                |
| ---------- | ------------------------------------------------------------------------------- |
| Background | Main storefront background and the base used for generated shade/overlay tones. |
| Foreground | Default text color and default border contrast for base surfaces.               |

### Schemes

In **Theme settings > Colors > Schemes**, you can edit **Scheme 1**, **Scheme 2**, and add as many additional schemes as needed.

Each scheme has the same six color fields:

| Setting          | How it is applied                                                     |
| ---------------- | --------------------------------------------------------------------- |
| Background       | Main background color for any section or block using that scheme.     |
| Foreground       | Text/icon color used on top of that scheme background.                |
| Border           | Default border color for elements using that scheme.                  |
| Hover background | Hover background for buttons and interactive elements in that scheme. |
| Hover foreground | Hover text/icon color for interactive elements in that scheme.        |
| Hover border     | Hover border color for interactive elements in that scheme.           |

Important: editing a scheme updates every section and block that uses that scheme.

### Utility

These settings control utility and supporting colors.

| Setting            | What it controls                               |
| ------------------ | ---------------------------------------------- |
| Error              | Error surfaces and error feedback color.       |
| Success            | Success surfaces and success feedback color.   |
| Mobile bar         | Browser UI color on supported mobile browsers. |
| Overlay background | Background shown behind overlays and popups.   |


---

# 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://help.brickspacelab.com/slab/getting-started/global-settings/colors-and-schemes.md?ask=<question>&goal=<endgoal>
```

`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.