Theming
Customize the Amelia Widget's visual appearance with theme colors.
Amelia's appearance can be customized through the theme configuration. The widget applies your colors as CSS custom properties on the iframe root.
Theme properties
| Property | CSS Variable | Description |
|---|---|---|
primaryColor | --color-primary | Primary button and accent color |
primaryColorForeground | --color-primary-foreground | Text color on primary-colored surfaces |
Usage
Drimer.init({
publicKey: "pk_live_...",
token: "your_session_token",
element: "#amelia",
config: {
theme: {
primaryColor: "#2563eb",
primaryColorForeground: "#ffffff",
},
},
});Color guidelines
- Use sufficient contrast between
primaryColorandprimaryColorForegroundfor accessibility (minimum WCAG AA 4.5:1 ratio) - Provide hex color values (e.g.,
#2563eb), not named colors or RGB - If no theme is provided, the widget defaults to a neutral dark scheme (
#171717/#fafafa)
Examples
Blue brand
theme: {
primaryColor: "#2563eb",
primaryColorForeground: "#ffffff",
}Dark brand
theme: {
primaryColor: "#171717",
primaryColorForeground: "#fafafa",
}Red brand
theme: {
primaryColor: "#dc2626",
primaryColorForeground: "#ffffff",
}