cometchat-ios-customization

Installation
SKILL.md

Companion skills (read first)

  • cometchat-ios-core owns setup and the golden path. This skill ADDS appearance. Exact token lists live in the docs — fetch via cometchat-ios-core/references/docs-map.md (theme-introduction, color-resources, component-styling, message-bubble-styling).

Use this skill when

"match our brand", "change the accent colour", "use our font", "dark mode", "restyle the bubbles", "translate the UI".

Three levels — go global first, per-component only when you must

1. Global theme (start here). CometChatTheme exposes static colour vars — primaryColor, extendedPrimaryColor50…900, neutralColor50…, white, black. Set them once at startup, before rendering, and every component follows. This is the branding lever: one primary colour usually does the whole job.

2. Typography. CometChatTypography.setFont(name:) swaps the family app-wide. Do this alongside the theme, not per component.

3. Per-component styles. Each component takes a style object — ConversationsStyle, SearchStyle, AvatarStyle, BadgeStyle, ReceiptStyle, StatusIndicatorStyle, TypingIndicatorStyle, DateStyle and the per-bubble styles (TextBubbleStyle, AudioBubbleStyle, CallBubbleStyle, BaseMessageBubbleStyle, …). These are assigned as properties, not passed through setters: conversations.avatarStyle = style, conversations.style = ConversationsStyle(). Reach for these only when the global theme cannot express what you need.

Style type names are mostly un-prefixed — it is ConversationsStyle, AvatarStyle, DateStyle, with no CometChat prefix on any of them. 491 of the kit's 638 public types are un-prefixed, so prefixing a style name is the most common way to invent a type that does not exist. Check catalogs/ios-v5.json before writing one.

Dark mode — the kit already does it

Installs
6
GitHub Stars
150
First Seen
May 7, 2026