Theming

chatcn ships with 4 built-in themes. Each theme defines a complete set of CSS variables that control every visual aspect of the chat interface.

Theme Comparison

Calm midnight workspace. Indigo accent with Zinc neutrals.

See all themes in action — Visit the homepage to try the interactive theme comparison with the full messenger and AI chat demos.

Usage

Set the theme via the theme prop on ChatProvider:

import { ChatProvider, ChatMessages, ChatComposer } from "@/components/ui/chat"
import type { ChatUser, ChatMessageData } from "@/components/ui/chat"

const user: ChatUser = { id: "user-1", name: "You", status: "online" }

<ChatProvider
  currentUser={user}
  theme="aurora"
  style={{ height: "100%", display: "flex", flexDirection: "column" }}
>
  <div className="flex-1 flex flex-col bg-[var(--chat-bg-main)]">
    <ChatMessages messages={messages} />
    <ChatComposer onSend={(text) => console.log(text)} />
  </div>
</ChatProvider>

Theme Properties

Property	Lunar	Aurora	Ember	Midnight
Accent	Indigo	Teal	Orange	Blue
Mood	Calm workspace	Soft morning	Dense & fast	OLED void
Bubble Style	Filled (indigo)	Outlined (teal wash)	Flat + left border	Transparent
Bubble Radius	14px	18px	0px	16px
Shadows	Subtle	Warm	None	None
Dark Mode	Yes	Yes	Yes	Dark only

Custom Themes

Create your own theme by defining a new [data-chat-theme="your-name"] block in your CSS with all the required variables:

/* Add to your globals.css */
[data-chat-theme="custom"] {
  --chat-bg-app:              #F8F9FA;
  --chat-bg-sidebar:          #FFFFFF;
  --chat-bg-main:             #FFFFFF;
  --chat-bg-header:           rgba(255, 255, 255, 0.80);
  --chat-bg-composer:         rgba(255, 255, 255, 0.85);

  --chat-bubble-outgoing:     #7C3AED;
  --chat-bubble-outgoing-text: #FFFFFF;
  --chat-bubble-incoming:     #F3F4F6;
  --chat-bubble-incoming-text: #111827;

  --chat-accent:              #7C3AED;
  --chat-accent-soft:         rgba(124, 58, 237, 0.08);
  --chat-green:               #10B981;
  --chat-orange:              #F59E0B;
  --chat-red:                 #EF4444;

  --chat-text-primary:        #111827;
  --chat-text-secondary:      #6B7280;
  --chat-text-tertiary:       #9CA3AF;
  --chat-border:              rgba(0, 0, 0, 0.06);
  --chat-border-strong:       rgba(0, 0, 0, 0.12);

  --chat-bubble-radius:       16px;
  --chat-input-radius:        24px;
  --chat-spacing-messages:    14px;
}

Or override specific variables inline via the style prop. Here is a purple accent override:

import { ChatProvider, ChatMessages } from "@/components/ui/chat"

// Override specific CSS variables via the style prop
<ChatProvider
  currentUser={currentUser}
  theme="lunar"
  style={{
    "--chat-accent": "#8B5CF6",
    "--chat-accent-soft": "rgba(139, 92, 246, 0.08)",
  } as React.CSSProperties}
>
  <ChatMessages messages={messages} />
</ChatProvider>

For a full custom theme, pass the theme name to ChatProvider:

import { ChatProvider, ChatMessages, ChatComposer } from "@/components/ui/chat"
import type { ChatUser, ChatTheme } from "@/components/ui/chat"

const user: ChatUser = { id: "user-1", name: "You", status: "online" }

<ChatProvider
  currentUser={user}
  theme={"custom" as ChatTheme}
  style={{ height: "100%", display: "flex", flexDirection: "column" }}
>
  <div className="flex-1 flex flex-col bg-[var(--chat-bg-main)]">
    <ChatMessages messages={messages} />
    <ChatComposer onSend={(text) => console.log(text)} />
  </div>
</ChatProvider>

CSS Variables Reference

Every theme must define these CSS custom properties. They are applied via the data-chat-theme attribute.

Variable	Description
`--chat-bg-app`	Application background
`--chat-bg-sidebar`	Sidebar / secondary surface
`--chat-bg-main`	Main content area background
`--chat-bg-header`	Header background (supports frosted glass)
`--chat-bg-composer`	Composer area background
`--chat-bubble-outgoing`	Outgoing message bubble color
`--chat-bubble-outgoing-text`	Outgoing message text color
`--chat-bubble-incoming`	Incoming message bubble color
`--chat-bubble-incoming-text`	Incoming message text color
`--chat-accent`	Primary accent color (links, buttons, active states)
`--chat-accent-soft`	Soft accent (hover backgrounds, highlights)
`--chat-green`	Online status / success
`--chat-orange`	Away status / warning
`--chat-red`	Error / destructive actions
`--chat-text-primary`	Primary text color
`--chat-text-secondary`	Secondary text (subtitles, metadata)
`--chat-text-tertiary`	Tertiary text (placeholders, hints)
`--chat-border`	Subtle border color
`--chat-border-strong`	Visible border color
`--chat-bubble-radius`	Border radius for message bubbles
`--chat-bubble-radius-grouped`	Corner radius for grouped messages
`--chat-input-radius`	Border radius for composer input
`--chat-spacing-messages`	Vertical gap between message groups
`--chat-spacing-grouped`	Vertical gap within grouped messages
`--chat-shadow-sm`	Small shadow (subtle elevation)
`--chat-shadow-md`	Medium shadow (cards, popovers)
`--chat-shadow-lg`	Large shadow (modals, overlays)
`--chat-shadow-toolbar`	Toolbar shadow on hover
`--chat-ease`	Default easing curve for animations
`--chat-duration-fast`	Fast animation duration
`--chat-duration-normal`	Normal animation duration

← Installation Messages →