Skip to main content

Themization overview

Customisable theme: Change the look of the components as per your need.

Usage​

interface IBorder {
  chatViewComponent?: string;
  chatProfile?: string;
  messageInput?: string;
  searchInput?: string;
  modal?: string;
  modalInnerComponents?: string;
  chatPreview?: string;
  userProfile?: string;
}
interface IBorderRadius {
  chatViewComponent?: string;
  chatProfile?: string;
  messageInput?: string;
  searchInput?: string;
  modal?: string;
  modalInnerComponents?: string;
  chatPreview?: string;
  userProfile?: string;
}
interface IBackgroundColor {
  chatViewComponentBackground?: string;
  chatProfileBackground?: string;
  messageInputBackground?: string;
  chatSentBubbleBackground?: string;
  chatReceivedBubbleBackground?: string;
  encryptionMessageBackground?: string;
  buttonBackground?: string;
  buttonDisableBackground?: string;
  searchInputBackground?: string;
  modalBackground?: string;
  modalInputBackground?: string;
  modalHoverBackground?: string;
  toastSuccessBackground?: string;
  toastErrorBackground?: string;
  toastShadowBackground?: string;
  criteriaLabelBackground?: string;
  chatPreviewBackground?: string;
  chatPreviewSelectedBackground?: string;
  chatPreviewBadgeBackground?: string;
  chatPreviewHoverBackground?: string;
  userProfileBackground?: string;
}

interface ITextColor {
  chatProfileText?: string;
  messageInputText?: string;
  chatSentBubbleText?: string;
  chatReceivedBubbleText?: string;
  timestamp?: string;
  encryptionMessageText?: string;
  buttonText?: string;
  buttonDisableText?: string;
  chatReceivedBubbleAddressText?: string;
  chatReceivedBubbleTimestampText?: string;
  chatSentBubbleTimestampText?: string;
  searchInputText?: string;
  searchPlaceholderText?: string;
  modalHeadingText?: string;
  modalSubHeadingText?: string;
  chatPreviewParticipantText?: string;
  chatPreviewMessageText?: string;
  chatPreviewDateText?: string;
  chatPreviewBadgeText?: string;
  userProfileText?: string;
}
interface IFont {
  chatProfileText?: string;
  messageInputText?: string;
  chatSentBubbleText?: string;
  chatReceivedBubbleText?: string;
  timestamp?: string;
  encryptionMessageText?: string;
  chatReceivedBubbleAddressText?: string;
  chatReceivedBubbleTimestampText?: string;
  chatSentBubbleTimestampText?: string;
  searchInputText?: string;
  searchPlaceholderText?: string;
  chatPreviewParticipantText?: string;
  chatPreviewMessageText?: string;
  chatPreviewDateText?: string;
  chatPreviewBadgeText?: string;
  userProfileText?: string;
}
interface IFontWeight {
  chatProfileText?: string;
  messageInputText?: string;
  chatSentBubbleText?: string;
  chatReceivedBubbleText?: string;
  timestamp?: string;
  encryptionMessageText?: string;
  chatReceivedBubbleAddressText?: string;
  chatReceivedBubbleTimestampText?: string;
  chatSentBubbleTimestampText?: string;
  searchInputText?: string;
  searchPlaceholderText?: string;
  chatPreviewParticipantText?: string;
  chatPreviewMessageText?: string;
  chatPreviewDateText?: string;
  chatPreviewBadgeText?: string;
  userProfileText?: string;
}
interface IIconColor {
  emoji?: string;
  attachment?: string;
  sendButton?: string;
  groupSettings?: string;
  userProfileSettings?: string;
}
export interface IChatTheme {
  borderRadius?: IBorderRadius;

  backgroundColor?: IBackgroundColor;

  fontSize?: IFont;

  fontWeight?: IFontWeight;

  fontFamily?: string;

  border?: IBorder;
  iconColor?: IIconColor;
  textColor?: ITextColor;
  backdropFilter?: string;
  scrollbarColor?: string;

  spinnerColor?: string;
}

lightChatTheme and darkChatTheme are available as default but these can be customised as per need.