Chat Themes
9 fully-designed themes ship with the chat component — each with a distinct personality, header treatment, bubble style, and accent palette. Every theme works in both light and dark modes out of the box.
Light Mode
All 9 Themes — Light Mode
Every theme is shown with the same conversation. Pick the one that matches your brand vibe.
<ChatWindow theme="aurora" colorMode="dark" messages={messages} />Dark Mode
All 9 Themes — Dark Mode
Every theme is shown with the same conversation. Pick the one that matches your brand vibe.
<ChatWindow theme="aurora" colorMode="dark" messages={messages} />Custom Branding via CSS Variables
Each theme is fully driven by --euic-* CSS variables. Override any of them via the cssVars prop or in your own stylesheet to brand the chat to match your product.
// Override any --euic-* variable to customize a theme.
// Pass as either cssVars prop or via parent CSS scope.
<ChatWindow
theme="modern"
cssVars={{
'--euic-primary': '#7c3aed',
'--euic-secondary': '#5b21b6',
'--euic-bubble-user-bg': '#7c3aed',
'--euic-bubble-user-fg': '#ffffff',
}}
messages={messages}
/>