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

# Colors

The four colours the whole theme is built from.

Four values drive everything, plus a pair for the scrollbars.

| Setting             | Where it shows                                                                                         |
| ------------------- | ------------------------------------------------------------------------------------------------------ |
| **Background**      | Page background                                                                                        |
| **Text**            | All body copy, headings, borders on dark buttons                                                       |
| **Accent**          | Boxed wordmark, checkout button, sale prices, link hover fills, focus outlines                         |
| **Border**          | Rules between collection tiles, cart lines, FAQ rows                                                   |
| **Scrollbar**       | The moving part of the bar on the collection grid, the cart, the filmstrip and the product description |
| **Scrollbar track** | The rail behind it                                                                                     |

## The accent does a lot

It's the red in the demo. Changing it changes the wordmark box, the **checkout now** button, sale prices, the hover fill on every navigation link, and the FAQ focus outline — all at once. That's intentional: one colour holds the theme together.

Pick something with enough contrast against your background that white text sits on it legibly. The demo's `#FF0000` on white is deliberately loud.

## Border

Easy to overlook. It's the hairline between collection tiles, between cart rows, and above and below FAQ questions. On a white background `#E0E0E0` reads as structure without drawing attention. Push it darker and the grid starts to look like a table.

## Scrollbars

Grey by default — `#B4B4B4` on `#D9D9D9` — because a scrollbar is a thing you look for when you want it and ignore the rest of the time.

They are their own settings rather than being derived from the accent, since a shop with a loud accent usually does not want a loud scrollbar. Set the moving part to your accent if you do.

Both apply to every scrolling pane in the theme: the collection grid, the cart's line list, the filmstrip and the product description.

Firefox draws its own narrower bar and takes the same two colours. Safari on a Mac hides scrollbars entirely until you scroll unless the system is set to always show them — nothing the theme can change.

## Everything else follows these

The theme has no fixed greys left. Every surface and every quiet piece of text — the phone bar, the cart box, the cart page behind its table, product descriptions, dates, sold-out labels — is mixed from your **Background** and **Text** colours.

That means a dark shop works without touching anything else. On white the results are the same greys the theme always used; on black they invert to match, instead of leaving a pale bar with pale text inside it.

Filled buttons take the background colour for their label rather than white, for the same reason: white on a bright accent is unreadable, and the page colour is the one dependable opposite of the text.