Theming

The Agent Chat SDK supports theming through the theme option in init(). You can customize the primary color and border radius.

Primary color

Set primaryColor to any hex color value. The SDK automatically generates hover, active, light background, and text contrast variants.

init({
  apiKey: 'your-api-key',
  userId: 'user-123',
  theme: {
    primaryColor: '#7c3aed', // Purple
  },
});

CSS Variable	Derivation
`--zlt-primary`	The color you provide.
`--zlt-primary-hover`	Lightness reduced by 6%.
`--zlt-primary-active`	Lightness reduced by 12%.
`--zlt-primary-light`	Saturation 40%, lightness 96% (background).
`--zlt-primary-text`	`#1a1a1a` or `#ffffff` based on luminance.

The default primary color is #2563eb (blue).

Control the roundness of UI elements with the borderRadius option. You can use a preset or a custom pixel value.

init({
  apiKey: 'your-api-key',
  userId: 'user-123',
  theme: {
    borderRadius: 'pill', // or 'sharp', 'rounded', or a number
  },
});

You can also pass a number (e.g. 12) for a custom radius in pixels.