Color Schemes & Theme Colors

A color scheme is a named palette of related colors — background, foreground, primary accent, secondary accent, and so on — that hang together visually. Themes ship with several schemes you can switch between, and each section can use its own scheme so different parts of a page can look different without breaking the overall design.

What's in a scheme

Every scheme defines a small set of named tokens. Sections reference those tokens by name (e.g. background, foreground, primary) — when you switch schemes, every section that follows the scheme picks up the new colors automatically.

Fuji ships four schemes:

• Forest — deep green with warm brown accents.
• Mountain — slate blue with cool gray accents.
• River — bright blue dominated by white.
• Swamp — dark mode with muted purple accents.

Setting your default scheme

With nothing selected in the editor, the inspector shows theme settings. Open the Colors group and pick a scheme from the dropdown — every section that doesn't override its scheme picks up the choice immediately.

Per-section overrides

Most sections expose a Color scheme setting in their inspector. Set it on a section to override the storefront-wide default — useful for visual variety:

• Hero in Forest, then a stats band in Mountain, then back to Forest.
• Footer in Swamp for a darker close to the page.
• One promotional section in a brighter scheme to draw attention.

Sections that don't set a Color scheme inherit the storefront default.

Customizing a scheme

You can tweak any scheme's individual colors instead of accepting the theme's defaults. In Theme settings → Colors, click a scheme name to open it, then adjust any of its color tokens. Your changes save into your draft and don't touch the original theme bundle — the original Forest is still there if you want to revert.

Sections that don't follow schemes

A few sections use single Color settings instead of (or alongside) the Color scheme setting — for example, a hero with a solid background color picker. Those don't change when you switch schemes; they're locked to whatever you set.

FAQ

Can I add a new scheme?

Yes — but only via the code editor. Schemes are declared in the theme bundle's settings. The visual editor lets you customize existing schemes' colors but not create new named schemes.

The scheme colors aren't loading correctly on the storefront.

Check that you've published your draft. Theme-settings changes (which include scheme overrides) require a publish to reach customers — saving the draft only updates the editor preview.

Can two sections share the same custom color?

If you customize the scheme's "primary" color, every section using that scheme picks up your custom value automatically. If you want one specific section in a different color, set its Color scheme to a different scheme, or use a per-section Color setting if the section exposes one.