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().

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

Theme properties

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.

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