Wonpa docs

Appearance

Colors ​

Wonpa has two color layers. Global colors set one palette for the whole storefront. Color schemes re-skin individual sections on top of that palette. Set the globals once during setup; reach for schemes only when a section needs to stand apart.

The two layers ​

The global colors are the flat swatches under Theme settings → Colors. They define the storefront's palette — background, text, borders, accent, and status colors — and every section inherits them.

Color schemes sit above the globals. Each scheme stores its own background, text, border, and accent, and any section can opt into one through its Color scheme setting. A section on a scheme re-skins to that scheme's colors; a section with no scheme applied uses the globals.

Scheme 1 holds the exact global values, so a section left on Scheme 1 looks identical to one with no scheme. Change the globals and Scheme 1 tracks them.

Set the global palette ​

  1. Open Theme settings → Colors.
  2. Under Base, set Background, Foreground (body text), Muted text, Surface, Surface contrast, Border, and Strong border.
  3. Under Accent, set Accent, Accent hover, Accent background, and Dark panels.
  4. Under Status, set Success, Warning, and Danger.

Accent is the color used for links, primary buttons, and highlights. Dark panels is the near-black fill behind the footer and other inverted areas.

Re-skin one section with a scheme ​

  1. In Theme settings → Colors, scroll to the color schemes at the top of the group and edit or add a scheme. Each scheme has Background, Text, Muted text, Border, Accent, and Accent text.
  2. In the theme editor, select the section you want to change.
  3. Set its Color scheme to the scheme you built.

The section's background, text, border, and accent switch to the scheme.

Note: Schemes re-point background, text, border, and accent only. Surface, strong border, dark panels, and the status colors stay global, so nested panels keep the storefront palette across every scheme.