Colors are set under Settings → Theme → Colors, split into a Light Theme panel and a Dark Theme panel with the same controls. Set each color as a swatch or a hex value; leave one blank to use the built-in default.
📷 Screenshot: The Colors panel with the Light/Dark sub-sections.
Brand colors
| Color | What it drives |
|---|---|
| Primary | Your main brand color — primary buttons, links, active states, focus. |
| Primary Hover | The hover shade of primary buttons/links. |
| Secondary | A muted secondary accent for less-prominent UI. |
| Accent | A second brand accent — gradients, highlights, the CTA gradient’s end color. |
UI / surface colors
| Color | What it drives |
|---|---|
| Background | The page background. |
| Surface | Raised panels/sections sitting on the background. |
| Surface Alt | A secondary surface tint for cards and panels. |
| Surface Hover | Surface color on hovered/active rows. |
| Card | Card backgrounds. |
| Border | Default borders and dividers. |
| Border Focus | Border color of a focused input. |
| Logo Backdrop | A pad behind brand logos — set a light chip in Dark mode so dark logos stay visible; transparent for none. |
Text colors
| Color | What it drives |
|---|---|
| Text Primary | Body and heading text. |
| Text Secondary | Subheads, captions. |
| Text Muted | Hints, placeholders — the least-prominent text. |
Status colors
Under Status Colors, each has its own Light and Dark value:
- Success — confirmations, in-stock badges.
- Warning — cautions.
- Error — validation and alerts.
- Info — informational banners/badges.
Sale price color
Under Ecommerce → Sale Pricing, set the Sale Color (Light & Dark) used for discounted prices.
💡 Tip: You mostly only need Primary, Accent, and maybe Background/Surface. The rest inherit sensible defaults derived from those.
Next: Typography.