Theming

Match Watenga.js to your brand with theme and appearance APIs.

theme object

Quick customization of primary color, background, text, border radius, and font.

javascript

w.mount('#payment-form', {
  amount: 25.00,
  currency: 'USD',
  reference: 'INV-001',
  theme: {
    colorPrimary: '#2f2f2f',
    colorBackground: '#ffffff',
    colorText: '#1e293b',
    borderRadius: '8px',
    fontFamily: '"Inter", system-ui, sans-serif',
  },
});

appearance.variables

Stripe-style design tokens applied across all widget elements.

javascript

appearance: {
  variables: {
    colorPrimary: '#2f2f2f',
    colorDanger: '#dc2626',
    spacingUnit: '4px',
    borderRadius: '8px',
  },
}

appearance.rules

Target individual CSS classes. Values are validated — no url() or expression().

javascript

appearance: {
  rules: {
    '.Tab': {
      border: '1px solid #e2e8f0',
      boxShadow: 'none',
    },
    '.Tab--selected': {
      borderColor: '#2f2f2f',
      color: '#2f2f2f',
    },
    '.Input': {
      borderRadius: '8px',
    },
  },
}