Colors
Found under Theme settings → Colors. Torquex uses Shopify color schemes, plus three fixed functional colors for status messaging.
What a color scheme is
Section titled “What a color scheme is”A color scheme is a named, reusable set of colors. You define one or more schemes in Theme settings → Colors, and then most sections let you pick which scheme they use in the section’s settings under its Color scheme option. This lets you, for example, run most of the page on a dark scheme and drop a single section onto a contrasting one — without editing colors section by section.
The whole storefront starts on Scheme 1 (the default): the page <body> is set to that scheme, and Torquex also reads a few of its values (background, border, muted text) into global defaults. Add and rename schemes from the color scheme group; each new scheme starts from the same eight colors below.
Torquex ships with eight ready-made schemes — four dark, one burnt-orange, and three light — so you can mix moods across the page out of the box:
Colors in each scheme
Section titled “Colors in each scheme”Every scheme defines these eight colors. The defaults are Torquex’s dark, industrial palette.
| Color | What it controls | Default |
|---|---|---|
| Background | The scheme’s page/section background. | #0f0f0f |
| Surface (cards) | Raised surfaces such as cards, drawers, and the secondary button fill. | #1a1a1a |
| Border | Hairline borders and dividers, and the secondary button border. | #2e2e2e |
| Body text | Default text color for the scheme. | #f0f0f0 |
| Muted text | Secondary text, icons, and the form select chevron. | #9a9a9a |
| Accent | The brand orange — links, the primary button fill, and primary button border. | #ff7a1a |
| Accent hover | Hover/active state of accent elements. | #ff8b42 |
| Button label | Text color that sits on top of the accent (primary button) fill. | #0f0f0f |
- #0f0f0fBackgroundbackground
Page and section background.
- #1a1a1aSurfacesurface
Cards, drawers, and the secondary button fill.
- #2e2e2eBorderborder
Hairlines, dividers, and secondary button borders.
- #f0f0f0Body texttext
Default text color for the scheme.
- #9a9a9aMuted texttext_muted
Secondary text, icons, and the select chevron.
- #ff7a1aAccentaccent
Links, the primary button fill, and its border.
- #ff8b42Accent hoveraccent_hover
Hover and active state of accent elements.
- #0f0f0fButton labelbtn_label
Text on top of the accent (primary button) fill.
How those colors map to roles
Section titled “How those colors map to roles”Shopify assigns each scheme color to one or more functional roles so storefront elements stay consistent. In Torquex the roles map as follows:
| Role | Uses this scheme color |
|---|---|
| Text | Body text |
| Background | Background |
| Links | Accent |
| Icons | Muted text |
| Primary button | Accent |
| On primary button | Button label |
| Primary button border | Accent |
| Secondary button | Surface (cards) |
| On secondary button | Body text |
| Secondary button border | Border |
Functional colors
Section titled “Functional colors”Below the schemes, under the Functional colors header, are three status colors. Unlike scheme colors, these are global — they do not change per section.
| Setting | What it does | Default |
|---|---|---|
| Success | Positive states such as “in stock” and successful actions. | #22c55e |
| Warning | Caution states such as low stock. | #f59e0b |
| Error | Error states such as form validation messages and “sold out”. | #ef4444 |
- #22c55eSuccesscolor_success
Positive states like "in stock" and successful actions.
- #f59e0bWarningcolor_warning
Caution states such as low stock.
- #ef4444Errorcolor_error
Errors such as validation messages and "sold out".
Related: Typography · Layout · Torquex support replies within 12 hours.