Chat - Custom theme

Restyle the entire chat surface by wrapping `ChatBox` in a `ThemeProvider` with custom palette and shape values.

ChatBox inherits its visual design from the active Material UI theme. This demo shows how a single createTheme() call changes bubble colors, border radius, and typography across the entire surface.

ThemeProvider with a custom palette.primary (teal) applied to user message bubbles
Custom shape.borderRadius reflected in bubble and container rounding
Custom typography.fontFamily propagated to all text elements
No extra CSS or style overrides needed—the theme drives everything.

The demo below shows a single createTheme() call retheming bubble colors, border radius, and typography across the entire surface:

Material UI chat

Styled with your active MUI theme

MUI Assistant

Hello! I am styled using your active Material UI theme. Try sending a message.

You

Great — the bubble colors come from palette.primary and the typography from the theme.

Edit code

<ThemeProvider theme={tealTheme}>
  <CssBaseline />
  <ChatBox
    adapter={adapter}
    initialActiveConversationId={minimalConversation.id}
    initialConversations={[minimalConversation]}
    initialMessages={minimalMessages}
    sx={{
      height: 500,
      border: '1px solid',
      borderColor: 'divider',
      borderRadius: '12px',
    }}
  />
</ThemeProvider>

<ThemeProvider theme={tealTheme}>
  <CssBaseline />
  <ChatBox
    adapter={adapter}
    initialActiveConversationId={minimalConversation.id}
    initialConversations={[minimalConversation]}
    initialMessages={minimalMessages}
    sx={{
      height: 500,
      border: '1px solid',
      borderColor: 'divider',
      borderRadius: '12px',
    }}
  />
</ThemeProvider>

Press Enter to start editing

Mapping theme tokens to chat elements

Theme token	Chat element
`palette.primary.main`	User message bubble background
`palette.primary.contrastText`	User message bubble text
`palette.grey[100]` / `grey[800]`	Assistant bubble background (light/dark)
`palette.text.primary`	Assistant bubble text
`palette.divider`	Borders, separators
`shape.borderRadius`	Bubble corner rounding
`typography.body2`	Message text
`typography.caption`	Timestamps, metadata

Scoping the theme to the chat surface

Wrapping with ThemeProvider scopes the theme to that subtree. Other parts of the page keep the parent theme.
Use CssBaseline inside the ThemeProvider if you need baseline styles applied to the chat container.
Import @mui/x-chat/themeAugmentation to add TypeScript types for MuiChatBox and related component overrides on createTheme().

API

ChatRoot

Chat - Custom theme

Mapping theme tokens to chat elements

Scoping the theme to the chat surface

See also

API