Interface: ChatUIThemeStylingOptions
JSON schema for configuring the ChatKitty Chat UI theme options. It's designed to be intuitive and easy to understand for front-end developers, designers, and product managers alike.
Properties
$version
$version:
"0.0.2"
base-theme
base-theme:
"light"|"dark"
The base theme to use for the Chat UI. This will be used as the default theme for all components.
overrides?
optionaloverrides:object
Overrides for specific components. These will override the base theme for the specified component.
channels?
optionalchannels:object
Channels list overrides.
channels.item?
optionalitem:object
Channels item overrides.
channels.item.display-name?
optionaldisplay-name:object
Channel display name overrides.
channels.item.display-name.color?
optionalcolor:string
The color of channel display names.
channels.item.last-message?
optionallast-message:object
Channel last message overrides.
channels.item.last-message.color?
optionalcolor:string
The color of channel last messages.
channels.item.last-message.timestamp?
optionaltimestamp:object
Channel last message timestamp overrides.
channels.item.last-message.timestamp.color?
optionalcolor:string
The color of channel last message timestamps.
channels.item.unread?
optionalunread:object
Channel unread messages overrides.
channels.item.unread.counter?
optionalcounter:object
Channel unread message counter overrides.
channels.item.unread.counter.background-color?
optionalbackground-color:string
The background color of channel unread message counters.
channels.item.unread.counter.color?
optionalcolor:string
The color of channel unread message counters.
channels.item.user?
optionaluser:object
Channel user overrides. (DMs only)
channels.item.user.presence?
optionalpresence:object
Channel user presence overrides.
channels.item.user.presence.status?
optionalstatus:object
Channel user presence status overrides.
channels.item.user.presence.status.offline?
optionaloffline:object
Channel user presence offline status overrides.
channels.item.user.presence.status.offline.color?
optionalcolor:string
The color of channel user presence offline status.
channels.item.user.presence.status.online?
optionalonline:object
Channel user presence online status overrides.
channels.item.user.presence.status.online.color?
optionalcolor:string
The color of channel user presence online status.
container?
optionalcontainer:object
Chat container overrides.
container.border?
optionalborder:object
Chat container border overrides.
container.border.radius?
optionalradius:string
The CSS radius of chat container borders.
container.border.style?
optionalstyle:string
The CSS style of chat container borders.
container.box-shadow?
optionalbox-shadow:string
The CSS box shadow of chat containers.
content?
optionalcontent:object
Chat content overrides.
content.background-color?
optionalbackground-color:string
The background color of chat content.
dropdown?
optionaldropdown:object
Chat dropdown overrides.
dropdown.background-color?
optionalbackground-color:string
The background color of chat dropdowns.
dropdown.hover?
optionalhover:object
dropdown.hover.background-color?
optionalbackground-color:string
The background color of chat dropdown hover states.
emoji?
optionalemoji:object
Emoji picker overrides.
emoji.background-color?
optionalbackground-color:string
The emoji picker background color.
footer?
optionalfooter:object
Chat footer overrides.
footer.background-color?
optionalbackground-color:string
The background color of chat footers.
footer.input?
optionalinput:object
Chat footer input overrides.
footer.input.border?
optionalborder:object
Chat footer input border overrides.
footer.input.border.selected?
optionalselected:string
The CSS style of chat footer input borders when selected.
footer.input.border.style?
optionalstyle:string
The CSS style of chat footer input borders.
footer.reply?
optionalreply:object
Chat footer reply overrides.
footer.reply.background-color?
optionalbackground-color:string
The background color of chat footer replies.
footer.tag?
optionaltag:object
Chat footer tag overrides.
footer.tag.active?
optionalactive:object
Chat footer active tag overrides.
footer.tag.active.background-color?
optionalbackground-color:string
The background color of chat footer active tags.
footer.tag.background-color?
optionalbackground-color:string
The background color of chat footer tags.
general?
optionalgeneral:object
General overrides for all components.
general.border?
optionalborder:object
Border overrides for all components.
general.border.style?
optionalstyle:string
The CSS style of borders.
general.button?
optionalbutton:object
Button overrides for all components.
general.button.background-color?
optionalbackground-color:string
The default background color of buttons.
general.button.clear?
optionalclear:object
Clear button overrides for all components.
general.button.clear.color?
optionalcolor:string
The color of the clear button.
general.button.color?
optionalcolor:string
The default color of buttons.
general.input?
optionalinput:object
Text input overrides for all components.
general.input.background-color?
optionalbackground-color:string
The background color of text inputs.
general.input.caret?
optionalcaret:object
Text input caret overrides for all components.
general.input.caret.color?
optionalcolor:string
The color of the caret.
general.input.placeholder?
optionalplaceholder:object
Input placeholder text overrides for all components.
general.input.placeholder.color?
optionalcolor:string
The color of placeholder text.
general.spinner?
optionalspinner:object
Spinner overrides for all components.
general.spinner.color?
optionalcolor:string
The color of spinners.
general.text?
optionaltext:object
Text overrides for all components.
general.text.color?
optionalcolor:string
The color of text.
header?
optionalheader:object
Chat header overrides.
header.background-color?
optionalbackground-color:string
The background color of chat headers.
header.channel?
optionalchannel:object
Chat header channel overrides.
header.channel.description?
optionaldescription:object
header.channel.description.color?
optionalcolor:string
The color of chat header channel descriptions.
header.channel.name?
optionalname:object
header.channel.name.color?
optionalcolor:string
The color of chat header channel names.
icons?
optionalicons:object
Icon overrides.
icons.add?
optionaladd:object
Add icon overrides.
icons.add.color?
optionalcolor:string
The color of add icons.
icons.audio?
optionalaudio:object
Audio icon overrides.
icons.audio.cancel?
optionalcancel:object
Audio cancel icon overrides.
icons.audio.cancel.color?
optionalcolor:string
The color of audio cancel icons.
icons.audio.confirm?
optionalconfirm:object
Audio confirm icon overrides.
icons.audio.confirm.color?
optionalcolor:string
The color of audio confirm icons.
icons.audio.pause?
optionalpause:object
Audio pause icon overrides.
icons.audio.pause.color?
optionalcolor:string
The color of audio pause icons.
icons.audio.play?
optionalplay:object
Audio play icon overrides.
icons.audio.play.color?
optionalcolor:string
The color of audio play icons.
icons.close?
optionalclose:object
Close icon overrides.
icons.close.color?
optionalcolor:string
The color of close icons.
icons.close.image?
optionalimage:object
Close icon image overrides.
icons.close.image.color?
optionalcolor:string
The color of close icon images.
icons.close.outline?
optionaloutline:object
Close icon outline overrides.
icons.close.outline.color?
optionalcolor:string
The color of close icon outlines.
icons.close.preview?
optionalpreview:object
Close icon preview overrides.
icons.close.preview.color?
optionalcolor:string
The color of close icon previews.
icons.delivered?
optionaldelivered:object
Delivered message status icon overrides.
icons.delivered.color?
optionalcolor:string
The color of delivered icons.
icons.document?
optionaldocument:object
Document icon overrides.
icons.document.color?
optionalcolor:string
The color of document icons.
icons.emoji?
optionalemoji:object
Emoji icon overrides.
icons.emoji.color?
optionalcolor:string
The color of emoji icons.
icons.file?
optionalfile:object
File icon overrides.
icons.file.color?
optionalcolor:string
The color of file icons.
icons.menu?
optionalmenu:object
Menu icon overrides.
icons.menu.color?
optionalcolor:string
The color of menu icons.
icons.microphone?
optionalmicrophone:object
Microphone icon overrides.
icons.microphone.color?
optionalcolor:string
The color of microphone icons.
icons.paperclip?
optionalpaperclip:object
Paperclip icon overrides.
icons.paperclip.color?
optionalcolor:string
The color of paperclip icons.
icons.pencil?
optionalpencil:object
Pencil icon overrides.
icons.pencil.color?
optionalcolor:string
The color of pencil icons.
icons.preview?
optionalpreview:object
Preview icon overrides.
icons.preview.color?
optionalcolor:string
The color of preview icons.
icons.reaction?
optionalreaction:object
Reaction icon overrides.
icons.reaction.color?
optionalcolor:string
The color of reaction icons.
icons.read?
optionalread:object
Read message status icon overrides.
icons.read.color?
optionalcolor:string
The color of read icons.
icons.scroll?
optionalscroll:object
Scroll icon overrides.
icons.scroll.background-color?
optionalbackground-color:string
The background color of scroll icons.
icons.search?
optionalsearch:object
Search icon overrides.
icons.search.color?
optionalcolor:string
The color of search icons.
icons.send?
optionalsend:object
Send icon overrides.
icons.send.color?
optionalcolor:string
The color of send icons.
icons.send.disabled?
optionaldisabled:object
Send icon disabled overrides.
icons.send.disabled.color?
optionalcolor:string
The color of disabled send icons.
icons.toggle?
optionaltoggle:object
Toggle icon overrides.
icons.toggle.color?
optionalcolor:string
The color of toggle icons.
markdown?
optionalmarkdown:object
Chat markdown overrides.
markdown.background-color?
optionalbackground-color:string
The background color of chat markdown.
markdown.border?
optionalborder:object
Chat markdown border overrides.
markdown.border.color?
optionalcolor:string
The color of chat markdown borders.
markdown.code?
optionalcode:object
Chat markdown code overrides.
markdown.code.multi-line?
optionalmulti-line:object
Chat markdown multi-line code overrides.
markdown.code.multi-line.color?
optionalcolor:string
The color of chat markdown multi-line code.
markdown.text?
optionaltext:object
Chat markdown text overrides.
markdown.text.color?
optionalcolor:string
The color of chat markdown text.
message?
optionalmessage:object
Chat message overrides.
message.audio?
optionalaudio:object
Chat message audio overrides.
message.audio.progress?
optionalprogress:object
Chat message audio progress overrides.
message.audio.progress.background-color?
optionalbackground-color:string
The background color of chat message audio progress states.
message.audio.progress.line?
optionalline:object
Chat message audio progress line overrides.
message.audio.progress.line.background-color?
optionalbackground-color:string
The background color of chat message audio progress line states.
message.audio.progress.selector?
optionalselector:object
Chat message audio progress selector overrides.
message.audio.progress.selector.background-color?
optionalbackground-color:string
The background color of chat message audio progress selectors.
message.audio.record?
optionalrecord:object
Chat message audio record overrides.
message.audio.record.background-color?
optionalbackground-color:string
The background color of chat message audio record states.
message.date?
optionaldate:object
Chat message date overrides.
message.date.background-color?
optionalbackground-color:string
The background color of chat message dates.
message.date.color?
optionalcolor:string
The color of chat message dates.
message.deleted?
optionaldeleted:object
Chat deleted message overrides (messages deleted by the current user).
message.deleted.background-color?
optionalbackground-color:string
The background color of chat deleted messages.
message.deleted.color?
optionalcolor:string
The color of chat deleted message text.
message.draft?
optionaldraft:object
Chat draft message overrides (messages started but not sent).
message.draft.text?
optionaltext:object
Chat draft message text overrides.
message.draft.text.color?
optionalcolor:string
The color of chat draft message text.
message.file?
optionalfile:object
Chat message file overrides.
message.file.extension?
optionalextension:object
Chat message file extension overrides.
message.file.extension.color?
optionalcolor:string
The color of chat message file extensions.
message.image?
optionalimage:object
Chat message image overrides.
message.image.background-color?
optionalbackground-color:string
The background color of chat message images.
message.inbound?
optionalinbound:object
Chat inbound message overrides (messages sent by other users and received by the current user).
message.inbound.background-color?
optionalbackground-color:string
The background color of chat inbound messages.
message.media?
optionalmedia:object
message.media.background-color?
optionalbackground-color:string
The background color of chat media messages.
message.new?
optionalnew:object
New (recently received) chat messages overrides.
message.new.color?
optionalcolor:string
The color of new chat message text.
message.new.counter?
optionalcounter:object
New messages counter overrides.
message.new.counter.background-color?
optionalbackground-color:string
The background color of the new messages counter.
message.new.counter.color?
optionalcolor:string
The color of the new messages counter.
message.outbound?
optionaloutbound:object
Chat outbound message overrides (messages sent by the current user).
message.outbound.background-color?
optionalbackground-color:string
The background color of chat outbound messages.
message.reaction?
optionalreaction:object
Chat message reaction overrides.
message.reaction.inbound?
optionalinbound:object
Inbound chat message reaction overrides. (reactions created by other users)
message.reaction.inbound.background-color?
optionalbackground-color:string
The background color of inbound chat message reactions.
message.reaction.inbound.border?
optionalborder:object
Inbound chat message reaction border overrides.
message.reaction.inbound.border.style?
optionalstyle:string
The CSS style of inbound chat message reaction borders.
message.reaction.inbound.counter?
optionalcounter:object
Inbound chat message reaction counter overrides.
message.reaction.inbound.counter.color?
optionalcolor:string
The color of inbound chat message reaction counters.
message.reaction.inbound.hover?
optionalhover:object
Inbound chat message reaction hover overrides.
message.reaction.inbound.hover.background-color?
optionalbackground-color:string
The background color of inbound chat message reaction hover states.
message.reaction.inbound.hover.border?
optionalborder:object
Inbound chat message reaction hover border overrides.
message.reaction.inbound.hover.border.style?
optionalstyle:string
The CSS style of inbound chat message reaction hover borders.
message.reaction.outbound?
optionaloutbound:object
Outbound chat message reaction overrides. (reactions created by the current user)
message.reaction.outbound.background-color?
optionalbackground-color:string
The background color of outbound chat message reactions.
message.reaction.outbound.border?
optionalborder:object
Outbound chat message reaction border overrides.
message.reaction.outbound.border.style?
optionalstyle:string
The CSS style of outbound chat message reaction borders.
message.reaction.outbound.counter?
optionalcounter:object
Outbound chat message reaction counter overrides.
message.reaction.outbound.counter.color?
optionalcolor:string
The color of outbound chat message reaction counters.
message.reaction.outbound.hover?
optionalhover:object
Outbound chat message reaction hover overrides.
message.reaction.outbound.hover.background-color?
optionalbackground-color:string
The background color of outbound chat message reaction hover states.
message.reaction.outbound.hover.border?
optionalborder:object
Outbound chat message reaction hover border overrides.
message.reaction.outbound.hover.border.style?
optionalstyle:string
The CSS style of outbound chat message reaction hover borders.
message.reply?
optionalreply:object
Chat reply message overrides.
message.reply.background-color?
optionalbackground-color:string
The background color of chat reply messages.
message.reply.color?
optionalcolor:string
The color of chat reply message text.
message.reply.user?
optionaluser:object
Chat reply message user overrides.
message.reply.user.display-name?
optionaldisplay-name:object
Chat reply message user display name overrides.
message.reply.user.display-name.color?
optionalcolor:string
The color of chat reply message user display names.
message.selected?
optionalselected:object
Chat selected message overrides.
message.selected.background-color?
optionalbackground-color:string
The background color of chat selected messages.
message.system?
optionalsystem:object
Chat system message overrides.
message.system.background-color?
optionalbackground-color:string
The background color of chat system messages.
message.system.color?
optionalcolor:string
The color of chat system message text.
message.tag?
optionaltag:object
Chat message tag overrides.
message.tag.color?
optionalcolor:string
The color of chat message tags.
message.text?
optionaltext:object
Chat message text overrides.
message.text.color?
optionalcolor:string
The color of chat message text.
message.timestamp?
optionaltimestamp:object
Chat message timestamp overrides.
message.timestamp.color?
optionalcolor:string
The color of chat message timestamps.
message.user?
optionaluser:object
Chat message user overrides.
message.user.display-name?
optionaldisplay-name:object
Chat message user display name overrides.
message.user.display-name.color?
optionalcolor:string
The color of chat message user display names.
side-menu?
optionalside-menu:object
Chat side menu overrides.
side-menu.active?
optionalactive:object
Chat side menu active overrides.
side-menu.active.background-color?
optionalbackground-color:string
The background color of chat side menu active states.
side-menu.active.color?
optionalcolor:string
The color of chat side menu active states.
side-menu.background-color?
optionalbackground-color:string
The background color of chat side menus.
side-menu.hover?
optionalhover:object
Chat side menu hover overrides.
side-menu.hover.background-color?
optionalbackground-color:string
The background color of chat side menu hover states.
side-menu.search?
optionalsearch:object
Chat side menu search overrides.
side-menu.search.border?
optionalborder:object
Chat side menu search border overrides.
side-menu.search.border.color?
optionalcolor:string
The color of chat side menu search borders.
stylesheet?
optionalstylesheet:string
A custom stylesheet to be applied across the Chat UI. This will be applied after the base theme and component overrides.