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;
}
interface IBorderRadius {
chatViewComponent?: string;
chatProfile?: string;
messageInput?: string;
searchInput?: string;
modal?: string;
modalInnerComponents?: 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;
}

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;
}
interface IFont {
chatProfileText?: string;
messageInputText?: string;
chatSentBubbleText?: string;
chatReceivedBubbleText?: string;
timestamp?: string;
encryptionMessageText?: string;
chatReceivedBubbleAddressText?: string;
chatReceivedBubbleTimestampText?: string;
chatSentBubbleTimestampText?: string;
searchInputText?: string;
searchPlaceholderText?: 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;
}
interface IIconColor {
emoji?: string;
attachment?: string;
sendButton?: string;
groupSettings?: 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.