SDK design system

ChatCenterUI supports three levels of chat UI customization — from global tokens to per-screen tuning.

Only what is described in this documentation is customizable

The SDK does not allow changing arbitrary UI elements. All available parameters are listed below and on the pages Colors, Typography, Images, Components, and Flows. If the parameter you need is not in these lists, it is not part of the SDK's public contract and cannot be changed. Some ChatConfig fields are overridden by server settings (the client value is a fallback) — see Known limitations.

Applying themes

In the ChatCenterUI class, before calling init(...), set styles by changing the theme or darkTheme fields. The parameters are optional. The SDK already has defaults for the light theme; if the dark theme is not defined, the SDK always uses the light one.

chatCenterUI = ChatCenterUI(applicationContext).apply {
    theme = chatLightTheme
    darkTheme = chatDarkTheme
    init("YOUR_PROVIDER_UID", "YOUR_APP_MARKER", chatConfig)
}

Customization levels

Level	Class	Purpose
Tokens	ChatColors, ChatTypography, ChatImages	Atomic design system values (color, font, icon). Set once and applied globally. See Colors
Texts (legacy)	ChatTexts	Programmatic string overrides. All fields are marked @Deprecated — use strings.xml via ecc_* keys, see Localization
Components	ChatComponents	Styles of standard UI elements (buttons, navigation, input fields). Uses tokens as default values. See Components
Flows	ChatFlows, ChatFlow, SearchFlow, etc.	Styles bound to a specific screen. Let you override a component for a single screen only
Theme	ChatTheme	The top-level container that combines tokens, components, and flows

Application priority

ChatFlows (per-screen) > ChatComponents (global) > ChatColors/ChatImages/ChatTypography (default tokens)

How to pick the level

• Changing brand colors and fonts → ChatColors and ChatTypography are sufficient.
• Need to repaint a specific UI element (for example, a message bubble) → ChatComponents.
• Need to change a single screen (e.g., Search or Gallery) → use a ChatFlows subclass. See Themes.

Architecture

A theme consists of two layers: components (ChatComponents) and flows (ChatFlows). Components are global styles; flows are overrides for specific screens.

In the diagram, ChatComponents is shown with two example components (IconButtonComponent, BubbleComponent) for brevity. The full list of all 18 *Component / *Style fields is in Components.

Related sections

• Themes — full guide on ChatComponents, ready-made theme examples.
• Colors — reference for ChatColors fields.
• Typography — ChatTypography: 6 semantic tokens + 20 custom fonts.
• Images — ChatImages: 66 drawable fields by category.
• Components — reference for ChatComponents fields.
• Flows — screen-specific customization (search, gallery, files, image, popups, etc.).
• Accessibility — TalkBack, contrast, Dynamic Type.
• Known limitations — parameters with server priority and behavioral notes.