Custom Theming

customize the appearance of the kindly chat interface by setting your own color theme the sdk provides two methods for theme customization using a complete theme object specifying individual colors setting a complete theme create and configure a custom theme by implementing the theme protocol or using the provided customtheme struct // create a custom theme let darktheme = customtheme( background uicolor black, botmessagebackground uicolor darkgray, botmessagetext uicolor white, buttonbackground uicolor blue, buttontext uicolor white, usermessagebackground uicolor systemblue, usermessagetext uicolor white, chatlogelements uicolor lightgray // add other color properties as needed ) // apply the custom theme kindlysdk setcustomtheme(darktheme) setting individual colors for convenience, you can also specify just the colors you want to customize without creating a complete theme kindlysdk setcustomtheme( background uicolor white, botmessagebackground uicolor lightgray, botmessagetext uicolor black, buttonbackground uicolor blue, buttontext uicolor white, usermessagebackground uicolor blue, usermessagetext uicolor white, chatlogelements uicolor gray // only specify the colors you want to customize ) available theme properties the theme properties are divided into two categories api defined colors (from kindly settings) these colors are defined in the kindly settings (app kindly ai) and are fetched with your bot configuration property description background main background color of the chat interface botmessagebackground background color for bot message bubbles botmessagetext text color for bot messages buttonbackground background color for buttons buttonoutline outline color for buttons buttontext text color for buttons chatlogelements color for chat log elements like timestamps navbarbackground background color for the navigation bar (maps to header background in api) navbartext text color for the navigation bar (maps to header text in api) inputbackground background color for the input field inputtext text color for the input field usermessagebackground background color for user message bubbles usermessagetext text color for user messages manually added colors these colors are not defined in the kindly settings but are used by the sdk for additional ui elements property description buttonselectedbackground background color for selected buttons defaultshadow default shadow color inputcursor color for the input cursor maintenanceheaderbackground background color for maintenance alerts clearing custom theme to clear a custom theme and revert to the default or api provided theme kindlysdk clearcustomtheme() this will ✅ remove any user defined custom theme ✅ revert to the theme from kindly settings (if available) ✅ fall back to the default sdk theme if no api theme exists ✅ apply changes immediately to any displayed chat interface theme priority when setting a custom theme user defined theme (set via setcustomtheme ) takes precedence over any other theme api theme (from kindly settings configured in app kindly ai) is used if no user theme is set default sdk theme is applied if neither user nor api themes are available theme priority examples // set a custom theme (highest priority) kindlysdk setcustomtheme( background uicolor black, botmessagebackground uicolor gray ) // later, clear custom theme to use api theme kindlysdk clearcustomtheme() // reverts to api or default theme // set custom theme again (overrides api theme) kindlysdk setcustomtheme(background uicolor white) live theme updates setcustomtheme( ) and clearcustomtheme() apply immediately to a chat that is currently on screen there is no need to dismiss and re display the chat for the new colors to take effect the page background, navigation bar, message bubbles, system messages, typing indicator, attachments, image cells, form cells, action buttons, file upload labels, the input field, and the toolbar all refresh in place this makes it natural to swap themes in response to system appearance changes for example, observe traitcollectiondidchange in your host view controller and call setcustomtheme( ) again with a dark or light palette override func traitcollectiondidchange( previoustraitcollection uitraitcollection?) { super traitcollectiondidchange(previoustraitcollection) let isdark = traitcollection userinterfacestyle == dark kindlysdk setcustomtheme( background isdark ? black white, botmessagebackground isdark ? uicolor(white 0 18, alpha 1) uicolor(white 0 95, alpha 1), // etc ) } internally the sdk posts a notification name kindlythemedidchange notification on every theme update; views in the chat hierarchy observe it and re apply theme derived colors the notification is public , so host apps can also subscribe if they need to react to theme changes themselves