Skip to main content
The widget is built on a token-based design system. You provide a small theme object; the SDK derives a full, accessible color system from it — a primary scale, auto-contrasting text, header and surface colors, and light/dark variants — and applies them as CSS variables on the widget root.

​
The theme object

Pass theme inside MedAssistConfig.
​
string
Brand color (hex). Drives buttons, the user message bubble, borders, and accents.
​
string
Solid background color (hex, rgb, or hsl).
​
string
Background image URL. Overrides background and switches the header/footer to a glass-morphism treatment.
​
"black" | "white"
Text color mode.
​
"light" | "dark"
Theme mode. Derives textColor when it isn’t set explicitly.
​
boolean
When true, the header uses the primary color as its background.
​
string
Custom image for the header title.
​
string
Optional subtitle shown under the title.

​
How a single primary becomes a full theme

From your primary color, the SDK:
  • Generates a 50–900 scale — lighter shades (50–400), the base (500), and darker shades (600–900) via HSL manipulation — used for hover, active, and variant states.
  • Computes primary-foreground — automatically picks black or white for text that sits on the primary color, so contrast stays readable whatever brand color you pick.
  • Derives surfaces — background, header, footer, message bubbles, and input backgrounds, mixed with a touch of primary and adjusted for light/dark.

​
CSS variables

The computed tokens are set as CSS variables on the widget root. The most useful ones:

​
Background image mode

When backgroundImage is set, the widget switches to a layered, glass-morphism look:
  • --background becomes transparent.
  • Header and footer get transparent backgrounds with semi-opaque borders and a stronger blur.
  • The message area gets a subtle blur with a dark overlay for legibility.

​
Test your theme

A theme that looks right in one mode can fail in another. Verify any change across all four combinations:
Also test with both a light and a dark primary color — the auto-contrast logic flips primary-foreground between black and white, and you want to confirm header and button text stay readable in both.