> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> The six color schemes every section uses: Night, Velvet, Midnight, Ivory, Gilt and Onyx.

**Where:** in the theme editor, open **Theme settings** (the gear icon at the top of the left sidebar) and choose **Colors**.

![Theme settings, Colors, in the theme editor](https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/settings-colors.webp?fit=max\&auto=format\&n=ipMVAv6ECVUC3DoM\&q=85\&s=2b88e7ace07b20ce77c5b767b28d8042)

1 Theme settings (the gear icon) · 2 Colors, opened in the sidebar

![The demo home page](https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/home-overview.webp?fit=max\&auto=format\&n=Y7lUE3PaLXfHjaRp\&q=85\&s=5a1b5a85ca912eb1fe8c93c76c8db18d)

The demo home page in scheme 1 (night)

## How it works

* Scheme 1, Night, is the main scheme: near-black #0A0A0C with ivory text and gold #C9A45C accents.
* Scheme 2, Velvet, is a slightly raised black for bands such as the story, newsletter and sale edit. Scheme 3, Midnight, is a deep navy for one contrasting band.
* Scheme 4, Ivory, is the light scheme, with near-black text and a bronze accent. Scheme 5, Gilt, is a gold band with near-black text.
* Scheme 6, Onyx, is the deepest black, used by the announcement bar.
* Each scheme sets the background (with an optional gradient), raised surfaces and panels, text, secondary text, borders, the accent used for hairlines and links, text on the accent, the primary button and its label, and the color behind product photographs.
* Each section picks a scheme with its own Color scheme setting.

## Edit it

* Change Accent, hairlines and links to your brand's metal color if gold does not suit it, and check that links stay readable.
* Use Ivory or Gilt for a lighter band between dark sections. Keep the main pages on Night.
* After changing a scheme, check the product page, the bag drawer and the filter drawer, which use the raised surface color.

## Settings

| Setting | What it does |
| - | - |
| **color\_schemes** | The color schemes themselves. |

> [!TIP]
>
> Scheme 1 (night) is the main scheme. Scheme 2 (velvet) and scheme 3 (midnight blue) suit raised bands, scheme 6 (onyx) the announcement bar and footer, and scheme 4 (ivory) and scheme 5 (gilt) a lighter section when you want one.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.