Interface

Theme

Theme

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

# EntryPointThemeProps

Properties:
Name Type Description
Container CSSProps Styles for container.

# 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.
CSSProps

# MainContainerThemeProps

# 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