The Appearance API

The Appearance API provides a comprehensive theming system for CyoGate embedded components — enabling pixel-perfect customization to match your brand.

Setting a Theme

CyoGateComponents.setAppearance({
  theme: 'custom',
  variables: {
    colorPrimary:        '#8dc63f',
    colorBackground:     '#ffffff',
    colorText:           '#1f2937',
    colorBorder:         '#d1d5db',
    colorFocusBorder:    '#8dc63f',
    colorError:          '#ef4444',
    fontFamily:          '"Inter", sans-serif',
    fontSize:            '14px',
    borderRadius:        '6px',
    inputHeight:         '44px',
    inputPadding:        '10px 14px',
  }
});

Dark Theme Example

CyoGateComponents.setAppearance({
  theme: 'custom',
  variables: {
    colorPrimary:    '#a8d85a',
    colorBackground: '#1e1e2e',
    colorText:       '#c8cdd8',
    colorBorder:     '#2e2e42',
    borderRadius:    '8px',
    inputHeight:     '46px',
  }
});

CSS Variables Reference

Variable	Description	Default
colorPrimary	Brand accent (buttons, focus rings)	#0066cc
colorBackground	Field background	#ffffff
colorText	Primary text color	#1f2937
colorBorder	Default border color	#d1d5db
colorError	Validation error color	#ef4444
fontFamily	Component font family	system-ui
fontSize	Base font size	14px
borderRadius	Corner radius	4px
inputHeight	Payment field height	40px

Per-Component Override

CollectJS.configure({
  appearance: {
    variables: { colorPrimary: '#8dc63f', borderRadius: '4px' }
  },
});