Theming the widget
The widget matches your brand automatically, with full control when you want it.
The widget is designed to look like part of your product out of the box, while giving you precise control when you want it.
Automatic theming
On load, the widget reads your site’s design system — it recognises shadcn/ui, MUI, Chakra, Mantine, daisyUI, Radix Themes, Tailwind, and Open Props — and adopts your colours, fonts, radius, and more. If it can’t detect a system, it falls back to your body font and dominant colours.
Theme tokens
Everything is driven by namespaced --syncanix-* CSS custom properties for colour, typography, shape, elevation, and motion. The widget uses logical CSS properties throughout, so it lays out correctly in both left-to-right and right-to-left.
Light & dark
A 'detected' design derives both a light and a dark scheme from your live site, preserving your brand hue. A WCAG-AA contrast floor is applied last, so text stays readable whatever your palette.
Design it in the dashboard
For full control — multiple designs, per-size overrides, the launcher, custom CSS — use the Widget Design Studio, where you author against the real widget as a live canvas.