Match your brand
Custom theming
The assistant should feel native to your product. Configure position, colors, display mode, and color scheme. Separate light and dark mode themes let you match both modes of your design system.
Works withAll SDKsLight & darkChatbox or drawerCustom trigger8 positions
Theme options
// Match your brand
displayMode: "drawer"
position: "right"
colorMode: "system"
light: { background: '#fff', ... }
What you get
- Chatbox or full-height drawer display modes
- Use our widget or build your own with programmatic control
- Light, dark, or system color mode
- Customize backgrounds, borders, buttons, and message bubbles
- Style the launcher button per color mode
How it works
1
Configure the theme prop
Set position, colorMode, displayMode, and separate light/dark color objects on the theme prop of YakProvider, plus lightButton/darkButton colors on the widget.
2
Theme rides into the embedded iframe
The SDK serializes your color mode and color values into the iframe URL, so the chat UI renders your brand colors as CSS variables on load.
3
Visitors see a native-feeling assistant
The launcher and panel match your color mode and palette, opening as a floating chatbox or a full-height side drawer that goes full-width on mobile.
Frequently asked questions
Related features
Ship custom theming with yak
Add an AI assistant that matches your product—then turn on the features your users need.