Your entire storefront is painted from one theme — a set of colors, fonts, spacing, and component styles. Change a value once and it updates everywhere, because every block reads from the theme instead of hardcoding anything. That’s also what makes dark mode and per-block overrides possible.
Where the theme lives
Everything is under Dashboard → Settings → Theme, organized into collapsible panels — Colors, Typography, Spacing & Layout, Buttons/Components, Header, Footer, Hero, Animations, and more. Each panel is covered in its own article in this section.
The cascade (what wins)
Any value on the storefront is resolved in this order — the first one that’s set wins:
- A per-block override — a single section deviating from the theme (see Per-block overrides).
- Your theme setting — what you set under Settings → Theme.
- The built-in default — a sensible baseline for every value.
Because there’s a built-in default for everything, you can leave any field blank and the storefront still looks right. You only set what you want to change.
Light & dark mode
Most color settings have a Light and a Dark value. Switching modes doesn’t rebuild the page — it just flips which set of colors applies, so your dark theme is always ready. Non-color values (spacing, fonts, radius) are shared across both modes.
You control dark mode under Theme Control:
- Enable Dark Mode — whether visitors can switch at all.
- Default Theme — Light, Dark, or System Preference (match the visitor’s device).
- Show Theme Toggle — whether the sun/moon switch appears in your header.
💡 Tip: Set your Light colors first, then flip to Dark and adjust only what needs it — most things carry over.
What’s in this section
- Colors — brand, surfaces, text, and status colors.
- Typography — fonts, sizes, weights, headings.
- Spacing & layout — rhythm, radius, widths.
- Buttons, cards & inputs.
- Header and Footer.
- Hero & CTA defaults.
- Custom CSS & fonts.
- Animations — scroll reveals, hover lift and zoom, the off switches.
- Per-block overrides.