Theme options. extends ControlsTheme
Properties:
Name | Type | Description |
---|---|---|
colors |
CoreThemeColors | Theme colors |
MainContainer |
Theme.MainContainerThemeProps | Theme for main container |
EntryPoint |
Theme.EntryPointThemeProps | Theme for entrypoint component |
MainHeader |
Theme.MainHeaderThemeProps | Theme for main header component |
PreEngagementCanvas |
Theme.PreEngagementCanvasThemeProps | Theme for pre-engagement canvas |
PendingEngagementCanvas |
Theme.PendingEngagementCanvasThemeProps | Theme for pending engagement canvas |
InvalidPreEngagementCanvas |
Theme.InvalidPreEngagementCanvasThemeProps | Theme for invalid engagement canvas |
Modal |
Object | Theme for the modal |
Container |
CSSProps | Theme for the modal's container |
Title |
CSSProps | Theme for the modal's title |
PrimaryButton |
CSSProps | Theme for the modal's primary button |
SecondaryButton |
CSSProps | Theme for the modal's secondary button |
calculated |
Object | Calculated properties |
lightTheme |
boolean | Whether theme is dark or light |
textColor |
string | Color for text |
Chat |
ChatTheme | Chat components theme properties |
SidePanel |
Theme.SidePanelThemeProps | components theme properties |
Badge |
Theme.BadgeThemeProps | components theme properties |
FormComponents |
Theme.FormComponentsThemeProps | FormComponents theme properties |
Button |
Theme.ButtonThemeProps | Button theme properties |
Menu |
Theme.MenuThemeProps | Menu theme properties |
Progress |
Object | Container for the Circular progress bar theme properties |
Circular |
Theme.CircularProgressThemeProps | Circular progress bar theme properties |
Dialpad |
Theme.DialpadThemeProps | Dialpad theme properties |
Dialer |
Theme.DialerThemeProps | Dialer theme properties |
Avatar |
Theme.AvatarThemeProps | Avatar theme properties |
Tabs |
Theme.TabsThemeProps | Tabs theme properties |
UserCard |
Theme.UserCardThemeProps | UserCard theme properties |
SidePanel |
Theme.SidePanelThemeProps | SidePanel theme properties |
FilterList |
Theme.FiltersListThemeProps | FilterList theme properties |
Badge |
Theme.BadgeThemeProps | Badge theme properties |
CountrySelector |
Theme.CountrySelectorThemeProps | CountrySelector theme properties |
Type Definitions
# AvatarThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | container |
AvailabilityIcon |
CSSProps | availability icon |
# BadgeThemeProps
Properties:
Name | Type | Description |
---|---|---|
OuterCircle |
CSSProps | external part of the circle that takes care of position and spacing around main inner circle |
InnerCircle |
CSSProps | main part of the circle - takes care of badge size, font and colors |
# ButtonThemeProps
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
disabledColor |
string |
<optional> |
|
lightHover |
boolean |
<optional> |
CSSProps
# CircularProgressThemeProps
Properties:
Name | Type | Description |
---|---|---|
staticBackgroundBorderColor |
string | color for static background border |
animatingBackgroundBorderColor |
string | color for animating background border |
animatingForegroundBorderColor |
string | color for animating foreground border |
# CoreThemeColors
Core theme colors
Extends CoreThemeBaseplates
Properties:
Name | Type | Description |
---|---|---|
defaultButtonColor |
string | The default button color |
lightTextColor |
string | The color for the light texts |
darkTextColor |
string | The color for the dark texts |
buttonHoverColor |
string | The color for the buttons hover state |
tabSelectedColor |
string | The color for the selected tabs |
connectingColor |
string | The color for the connecting copy |
disconnectedColor |
string | The color for the disconnected copy |
notificationBackgroundColorInformation |
string | The color for the information notifications background |
notificationBackgroundColorSuccess |
string | The color for the success notifications background |
notificationBackgroundColorError |
string | The color for the error notifications background |
notificationIconColorWarning |
string | The color for the icons in the warning notifications |
notificationBackgroundColorWarning |
string | The color for the warning notifications background |
notificationIconColorError |
string | The color for the icons in the error notifications |
userAvailableColor |
string | The color for available users |
userUnavailableColor |
string | The color for unavailable users |
errorColor |
string | Error color |
errorGlow |
string | Error glow |
circularProgressColor |
string | Color of the circular progress bar |
disabledColor |
string | Color the disabled elements |
focusColor |
string | Color for the focused elements |
focusGlow |
string | Color of the glow for the focused elements |
# CountrySelectorThemeProps
Properties:
Name | Type | Description |
---|---|---|
CountryList |
CSSProps | Style for the dialer's country list component |
CountryItem |
CSSProps | Object | Style for the dialer's country list component item |
Flag |
CSSProps | Style for the dialer's country list flag component |
# DialerThemeProps
Properties:
Name | Type | Description |
---|---|---|
CallButton |
CSSProps | Style for the dialer's Call Button |
# DialpadButtonThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Object | Style for the dialpad button's container |
Caption |
CSSProps | Style for the dialpad button's caption |
Description |
CSSProps | Style for the dialpad button's description |
# DialpadThemeProps
Properties:
Name | Type | Description |
---|---|---|
Button |
Theme.DialpadButtonThemeProps | Style for the dialpad's buttons |
# FiltersListThemeProps
Properties:
Name | Type | Description |
---|---|---|
ApplyButton |
CSSProps | Styles for the main "Apply" button |
ResetButton |
CSSProps | Styles for the secondary "Reset" button |
ItemContainer |
CSSProps | Styles for the filter item wrapper element |
ItemContainerExpanded |
CSSProps | Styles for the expanded filter item wrapper element |
# FormComponentsThemeProps
Properties:
Name | Type | Description |
---|---|---|
Input |
CSSProps | Styles for the form input component |
TextArea |
CSSProps | Styles for the form textarea component |
Select |
CSSProps | Styles for the form select component |
# InvalidPreEngagementCanvasThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for the container. |
Button |
CSSProps | Styles for button. |
# MainHeaderThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for the header container. |
Logo |
CSSProps | Styles for the header logo. |
# MenuThemeProps
Properties:
Name | Type | Description |
---|---|---|
Items |
CSSProps | Items container for menu items |
Item |
CSSProps | Item properties for an item |
# MessageCanvasTrayThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Style for the message canvas tray container |
Button |
Theme.ButtonThemeProps | Style for the message canvas tray's button |
# MessageInputThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for the message input's container |
Button |
Theme.ButtonThemeProps | Styles for the message input's button |
# MessageListItemThemeProps
Properties:
Name | Type | Description |
---|---|---|
FromMe |
Theme.MessageThemeProps | Styles that represent how user sees their own messages |
FromOthers |
Theme.MessageThemeProps | Styles that represent how user sees messages from everyone else |
ReadStatus |
CSSProps | Styles for the "read" status text |
# MessageListThemeProps
Properties:
Name | Type | Description |
---|---|---|
DateSeparatorLine |
CSSProps | Styles for the line for date separators |
DateSeparatorText |
CSSProps | Styles for the text for date separators |
TypingIndicator |
CSSProps | Styles for the typing indicator |
# MessageThemeProps
Properties:
Name | Type | Description |
---|---|---|
Avatar |
CSSProps | Styles for the message avatar component |
Bubble |
CSSProps | Styles for the message bubble component |
Header |
CSSProps | Styles for the header of the message |
# MessagingCanvasThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for the messaging canvas container |
# PendingEngagementCanvasThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for container. |
CancelButton |
CSSProps | Styles for cancel button. |
# PreEngagementCanvasFormThemeProps
Properties:
Name | Type | Description |
---|---|---|
SubmitButton |
CSSProps | Styles for submit button. |
Label |
CSSProps | Styles for label. |
# PreEngagementCanvasThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for container. |
Form |
Theme.PreEngagementCanvasFormThemeProps | Styles for the form. |
Footer |
CSSProps | Styles for the form footer. |
# SidePanelThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Main container |
Header |
CSSProps | Header element |
HeaderButton |
CSSProps | Close button in header element |
# TabsThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for the tabs container |
LabelsContainer |
CSSProps | Styles for the container for the tab header labels |
Button |
Theme.ButtonThemeProps | Styles for the icon based tab headers |
Active |
CSSProps | Styles for the active tab header container |
Inactive |
CSSProps | Styles for the inactive tab header container |
# UserCardThemeProps
Properties:
Name | Type | Description |
---|---|---|
AvatarContainer |
CSSProps | Styles for the container for the avatar |
AvailabilityContainer |
CSSProps | Styles for the container for the availability badge |
# WelcomeMessageThemeProps
Properties:
Name | Type | Description |
---|---|---|
Container |
CSSProps | Styles for the container for the chat welcome message |
Icon |
CSSProps | Styles for the container for the chat welcome message icon |