Appearance

the appearance section allows you to customize the visual theme of your ai assistant interface it provides fine grained controls over fonts, colors, and ui elements for both light mode and dark mode themes all changes can be previewed before saving 🎨 these settings help you create a consistent agent / brand / organization experience and improve accessibility appearance preview theme selection theme dropdown select from predefined themes (e g , sunny morning ) light mode / dark mode tabs switch between customization for light and dark interfaces general field description background color background color for the overall interface font size base font size in pixels (e g , 16) font url link to a custom font (optional) font name name of the custom font to be applied (if available) top bar customize the chat header (top section) field description background color background color of the top bar text color text color used in the top bar agent panel customize the panel where the agent's responses are shown field description background color background color for agent panel text color text color for agent responses user panel customize the panel where the user input appears field description background color background color for user panel text color text color for user messages input box customize the message input box field description background color background of the input field text color color of the text typed by the user border color border color for unfocused state focus border color border color when the input box is focused send button style the message send button field description enabled background button background when active enabled icon icon color when active disabled background button background when input is empty/inactive disabled icon icon color when disabled question suggestions customize the suggested response buttons field description background color button background color hover background background color on hover text color text color for the suggestion text arrow color color of the arrow icon in the suggestion actions save apply the changes permanently preview temporarily view how your theme will look before saving advanced mode access more advanced css based customizations best practices use accessible contrast for text and background combinations maintain consistent branding across light and dark modes preview changes thoroughly before applying to production agents use advanced mode for greater control with css next steps after configuring the appearance , continue to review dialog settings or widget integration for a complete assistant setup