Per-section color overrides
How to give a single section its own palette without changing global colors.
Updated 2026-05-09
The primary way to recolor a section in Dost is the Color scheme picker. Most sections expose one, and many blocks (mega-menu blocks, cart drawer, quick view, search overlay, gift card page) expose their own.
How scheme overrides work
When a section is set to scheme-3, the theme wraps the section root in .color-scheme-3. That class emits CSS custom properties (--color-background, --color-foreground, --color-accent, --color-link, etc.) — and every internal rule reads from those variables. So:
.section-something {
background: var(--color-background);
color: var(--color-foreground);
}
…reflects the scheme automatically. Switching the section's scheme picker is enough; you don't need custom CSS.
To target only sections set to a given scheme:
.color-scheme-2 .my-block { border: 1px solid var(--color-border); }
Surfaces with their own scheme picker
| Surface | Setting |
|---|---|
| Most homepage / template sections | color_scheme (section setting) |
| Mega-menu blocks | color_scheme (block setting) |
| Header transparent state | color_scheme_transparent |
| Cart drawer | cart_drawer_color_scheme (theme setting) |
| Quick view modal | quick_view_color_scheme (theme setting) |
| Search overlay | search_color_scheme (theme setting) |
| Gift card receipt page | gift_card_color_scheme (theme setting) |
Section-level inline overrides (legacy)
A few sections still expose individual colour fields in addition to their color_scheme — typically for overlays, countdown digits, or other elements that need finer-grained control than a scheme provides. Examples:
- Hero banner / Slideshow / Video hero — overlay opacity + text colour
- Countdown — eyebrow, digit, label, button colour overrides
- Announcement bar — background, text
- Image with text — overlay tint
These emit inline style="--var-name: value" on the section root. Internal CSS reads those before falling back to the scheme variables, so leaving the field blank inherits the scheme automatically.
Tips
- Use scheme overrides as the default tool. Reach for inline colour fields only when a scheme can't express what you need (e.g. semi-transparent overlays).
- Too many sections with custom palettes break the theme rhythm. A good rule of thumb is one or two scheme switches per page.