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 kindlythemecolors object specifying individual colors setting a complete theme create and configure a custom theme using the provided customkindlytheme class // create a custom theme val darktheme = customkindlytheme( background = color black, botmessagebackground = color(0xff333333), // dark gray botmessagetext = color white, bubblebuttonbackground = color(0xff3700b3), // purple buttonbackground = color(0xfff44336), // red buttontext = color white, usermessagebackground = color(0xff4caf50), // green usermessagetext = color white, headerbackground = color(0xff1a1a1a), // very dark gray headertext = color white, inputbackground = color(0xff333333), // dark gray inputtext = color white, chatlogelements = color(0xffbbbbbb) // light gray // 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 = color white, botmessagebackground = color(0xffe8e8e8), // light gray botmessagetext = color(0xff333333), // dark gray bubblebuttonbackground = color(0xff3f51b5), // indigo buttonbackground = color(0xfff44336), // red buttontext = color white, usermessagebackground = color(0xff4caf50), // green usermessagetext = color white, headerbackground = color(0xff3f51b5), // indigo headertext = color white, chatlogelements = color(0xff808080) // 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 bubblebuttonbackground background color for the chat bubble button buttonbackground background color for buttons buttonoutline outline color for buttons buttontext text color for buttons chatbubbletext text color for the chat bubble chatlogelements color for chat log elements like timestamps globaliconsbuttonbackground background color for global icons buttons headerbackground background color for the header headertext text color for the header inputbackground background color for the input field inputtext text color for the input field panelbackground background color for panels secondarybuttonbackground background color for secondary buttons 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 = color black, botmessagebackground = color(0xff333333) ) // 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 = color white) implementation in app kt here's an example of applying a custom theme in your application class override fun oncreate() { super oncreate() // initialize the sdk kindlysdk start( application = this, botkey = your bot key, languagecode = "en", market = "your market" ) // apply a custom theme kindlysdk setcustomtheme( background = color white, botmessagebackground = color(0xffe8e8e8), botmessagetext = color(0xff333333), buttonbackground = color(0xfff44336), buttontext = color white, usermessagebackground = color(0xff4caf50), usermessagetext = color white ) // rest of your initialization code } 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 header, message bubbles, form cells, buttons, input field, and page background all refresh automatically the shared color palette is backed by mutablestateof internally, so any @composable in the chat hierarchy that reads theme colors recomposes on the next theme update through compose's standard snapshot system no manual subscribe is needed inside the sdk and no manual reload is needed from the host app this makes it natural to swap themes in response to system appearance changes for example, observe configuration changes in your host activity and call setcustomtheme( ) again with a dark or light palette override fun onconfigurationchanged(newconfig configuration) { super onconfigurationchanged(newconfig) val isdark = (newconfig uimode and configuration ui mode night mask) == configuration ui mode night yes kindlysdk setcustomtheme( background = if (isdark) color black else color white, botmessagebackground = if (isdark) color(0xff2c2c2e) else color(0xfff1f4f8), // etc ) }