> This page is for For Developers.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://whop.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://whop.ferndocs.com/_mcp/server.

# Theming & styles

> Customize the appearance of chat elements

## Theming

Customize the appearance of chat elements with a theme. On web, pass a `theme` through the Elements appearance options. On Swift, create a `WhopTheme` and apply it with `.whopTheme()`.

#### React

```tsx
<Elements
	elements={elements}
	appearance={{
		theme: {
			appearance: "dark",
			accentColor: "blue",
			grayColor: "gray",
			dangerColor: "red",
			warningColor: "amber",
			successColor: "green",
			infoColor: "sky",
		},
	}}
>
	<ChatSession token={getToken}>
		<ChatElement options={chatOptions} />
	</ChatSession>
</Elements>
```

#### Vanilla JS

```typescript
const whopElements = await loadWhopElements();

whopElements.updateOptions({
	appearance: {
		theme: {
			appearance: "dark",
			accentColor: "blue",
			grayColor: "gray",
			dangerColor: "red",
			warningColor: "amber",
			successColor: "green",
			infoColor: "sky",
		},
	},
});
```

#### Swift

```swift
struct ThemedMessagesView: View {
    @State private var selectedChannel: DMChannel?

    let theme = WhopTheme(
        accent: .plum,
        neutral: .gray,
        danger: .tomato,
        warning: .violet
    )

    var body: some View {
        WhopDMsListView(
            onEvent: { event in
                switch event {
                case let .channelSelected(channel):
                    selectedChannel = channel
                }
            }
        )
        .whopTheme(theme)
        .navigationDestination(item: $selectedChannel) { channel in
            WhopChatView(
                channelId: channel.id,
                style: .imessage
            )
            .whopTheme(theme)
            .navigationBarTitleDisplayMode(.inline)
            .navigationTitle(channel.name)
        }
    }
}
```

### Theme properties

| Purpose    | Web option     | Swift option | Description                                                                            |
| ---------- | -------------- | ------------ | -------------------------------------------------------------------------------------- |
| Appearance | `appearance`   | —            | Light or dark mode (`"light"`, `"dark"`) on web. Swift follows the app's color scheme. |
| Accent     | `accentColor`  | `accent`     | Primary interactive elements, links, and selection highlights                          |
| Neutral    | `grayColor`    | `neutral`    | Text, borders, and backgrounds                                                         |
| Danger     | `dangerColor`  | `danger`     | Destructive actions and error states                                                   |
| Warning    | `warningColor` | `warning`    | Warning states                                                                         |
| Success    | `successColor` | `success`    | Success states                                                                         |
| Info       | `infoColor`    | `info`       | Informational highlights                                                               |

### Available colors

All color properties accept these tints. Use strings on web, such as `"blue"`, and enum values on Swift, such as `.blue`.

`amber` · `blue` · `bronze` · `brown` · `crimson` · `cyan` · `gold` · `grass` · `gray` · `green` · `indigo` · `iris` · `jade` · `lemon` · `lime` · `magenta` · `mint` · `orange` · `pink` · `plum` · `purple` · `red` · `ruby` · `sky` · `teal` · `tomato` · `violet` · `yellow`

## Chat styles

Choose between Discord-style or iMessage-style chat. iMessage style (bubble chat) is the default if not provided.

#### React

```tsx
const chatOptions: ChatElementOptions = useMemo(() => {
	return {
		channelId: "chat_feed_XXXXXXXXXXXXXX",
		style: "discord", // or "imessage" (default)
	};
}, []);
```

#### Vanilla JS

```typescript
const chatElement = session.createElement("chat-element", {
	channelId: "chat_feed_XXXXXXXXXXXXXX",
	style: "discord", // or "imessage" (default)
});
```

#### Swift

```swift
// iMessage style (bubble chat)
WhopChatView(
    channelId: "chat_feed_XXXXXXXXXXXXXX",
    style: .imessage
)

// Discord style (full-width messages)
WhopChatView(
    channelId: "chat_feed_XXXXXXXXXXXXXX",
    style: .discord
)
```