Colors & presets

Theme settings → Style → Theme presets picker (top of the customize panel).

Presets

Dost ships with 4 colour & typography presets. Each preset is a complete starting point — selecting one overrides every colour scheme, font, button style, radius, and motion setting.

Preset	Vibe
Dost	Off-white background, charcoal text, subtle gold accent — the default editorial look
Misk	Warm cream + deep brown — softer, lifestyle-leaning
Avlu	High-contrast white + black, minimal accents — gallery-style
Cevher	Dark mode — black background, parchment text, muted gold

The preset payloads live under listings/{preset}/settings_data.json (one folder per preset). Switching presets from the admin loads that file as current.

Switching presets resets your colour and typography choices. If you've already customized, the preset picker shows a confirmation. Duplicate the theme first if you want to keep the current state as a backup.

How color schemes work

Dost no longer uses one-off background, text, accent settings. It uses Shopify's standard color_scheme_group with 5 named schemes (scheme-1 … scheme-5). Each scheme defines a complete palette:

Role	What it paints
background	Section / element background fill
text	Body text on that background
link	Links and underlined inline text
button_background	Primary button fill
button_label	Primary button label
secondary_button_label	Secondary (outline) button label — uses the scheme background as fill
Gradient role	Optional gradient for hero / banner backgrounds

Each scheme emits a .color-scheme-N class with CSS custom properties (--color-background, --color-foreground, --color-accent, --color-link, etc.) on its container. Sections, blocks, and many global components (cart drawer, quick view, search overlay, gift card page, header transparent state) expose their own color_scheme picker so an individual element can override the scheme it inherits.

A separate Page background setting (page_background, → --color-page-background) controls the document background independent of any scheme — useful so empty space around boxed sections stays consistent.

Globals that stay outside the scheme system

A handful of colours are semantic and shouldn't change per scheme:

Setting	Used for
dost-error	Form errors, low-stock alert
dost-success	Form success messages, "in stock" pulse
Sold-out overlay	Sold-out badge background on cards
Badge colours	Sale / new / preorder / custom badges (see Badges)

Section-level overrides

Every section that supports it exposes a color_scheme setting at the top of its settings panel. Pick a scheme and that section's root gets .color-scheme-N, which paints background, text, links, and buttons. Mega-menu blocks, cart drawer, quick view, and the search overlay also expose their own scheme pickers — see the relevant docs.

"Buy it now" / dynamic checkout button

Shopify's dynamic checkout button (Shop Pay / PayPal / etc.) inherits the active scheme. Specifically:

• Background → scheme button_background
• Label → scheme button_label

There's no longer a separate "Buy it now" colour setting — restyle the scheme used on PDP to change it.

Tips

• To target a specific scheme in custom CSS, use the class: .color-scheme-3 .my-custom-block { … }.
• For a fully white site, pick Avlu and lighten the dividers in your scheme.
• Use --color-page-background to set page chrome (around boxed/contained sections) without touching any scheme.