Customizing the widget theme

AuraWidget lets you customize the in-frame theme as per your brand colors via a themeConfig you pass during initialization.

themeConfig

Property	Type	Description
`colors`	`Partial<Record<OverrideThemeColors, string>>`	Override theme colors for the in-frame widget.
`primary`	`string`	The main accent color, used for primary actions, highlights, and interactive elements.
`secondary`	`string`	A supporting accent color, often used for secondary buttons or highlights.
`success`	`string`	Indicates positive outcomes such as completion, confirmation, or success states.
`warning`	`string`	Highlights caution or potential risk, used for warnings and non-critical alerts.
`error`	`string`	Represents errors, failures, or destructive actions; used for error messages and alerts.
`info`	`string`	Used for informational messages, neutral notices, and non-critical system feedback.

* Required field

Colors

It accepts a single hex color for each alias color like primary | secondary | success .... The widget generates a full Tailwind-like scale (50 … 950 plus DEFAULT) for each alias and overrides the default scale for that alias. You can choose to override only one or more aliases.


import { AuraWidget } from '@insight-health/aura';
 
await AuraWidget.init({
  ...otherConfig,
  themeConfig: {
    colors: {
      primary: '#2563eb',
      secondary: '#7c3aed',
    },
  },
});

Dynamic Theme Updates

You can also dynamically update the theme anytime after initialization using the setTheme method.


await AuraWidget.setTheme({
  colors: {
    primary: '#2563eb',
    secondary: '#7c3aed',
    success: '#16a34a',
    warning: '#f59e0b',
    error: '#dc2626',
    info: '#0ea5e9',
  },
});