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',
  },
});