Skip to content
Virtual Try-On

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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “Storefront Examples”
new THGVTO({
  theme: {
    primaryColor: '#1a1a1a',
    buttonRadius: '0',
    fontFamily: 'Playfair Display, serif',
  },
});