Theming

The modal is the only UI surface the SDK renders, and every visual aspect of it is controlled via CSS custom properties. The modal uses Shadow DOM — your page CSS won’t leak in, and its styles won’t affect your page.

Applying a theme

The idiomatic path is the theme option on the THGVTO constructor — it maps directly to CSS custom properties on the modal:

new THGVTO({
  theme: {
    primaryColor: '#1a1a2e',
    primaryTextColor: '#ffffff',
    buttonRadius: '24px',
    fontFamily: 'Helvetica Neue, sans-serif',
    modalMaxWidth: '900px',
  },
});

You can also set the CSS custom properties directly on vto-modal if you need finer-grained control:

vto-modal {
  --vto-primary-color: #1a1a2e;
  --vto-primary-text-color: #ffffff;
  --vto-button-radius: 24px;
  --vto-font-family: 'Helvetica Neue', sans-serif;
}

Core Tokens

Property	Default	Description
`--vto-primary-color`	`#000`	Primary action colour (buttons, selected states)
`--vto-primary-text-color`	`#fff`	Text colour on primary backgrounds
`--vto-button-radius`	`4px`	Button border radius
`--vto-modal-border-radius`	`12px`	Modal corner radius
`--vto-font-family`	`inherit`	Font family (inherits from host page)
`--vto-modal-max-width`	`480px`	Maximum modal width

Warning Tokens

Property	Default	Description
`--vto-warning-color`	`#d97706`	Warning accent
`--vto-warning-bg-color`	`#fffbeb`	Warning background
`--vto-warning-border-color`	`#fde68a`	Warning border
`--vto-warning-text-color`	`#92400e`	Warning text

Styling your trigger

The SDK no longer renders a button — you own the trigger and style it however you like. The theme option controls the modal only.

Storefront Examples

new THGVTO({
  theme: {
    primaryColor: '#1a1a1a',
    buttonRadius: '0',
    fontFamily: 'Playfair Display, serif',
  },
});

new THGVTO({
  theme: {
    primaryColor: '#e63946',
    buttonRadius: '24px',
    fontFamily: 'Inter, sans-serif',
  },
});

new THGVTO({
  theme: {
    primaryColor: '#333',
    buttonRadius: '2px',
    fontFamily: 'system-ui, sans-serif',
  },
});