Theming & styles

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
Vanilla JS
Swift

<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>

const whopElements = await loadWhopElements();

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

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
Vanilla JS
Swift

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

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

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

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

Get started

Setup

Chat types

Components

Theming

Theme properties

Available colors

Chat styles

​Theming

​Theme properties

​Available colors

​Chat styles

Theming

Theme properties

Available colors

Chat styles