{"id":"081305b4-3f7d-4cb1-8fdc-d5779fef43c4","shortId":"qKSHGn","kind":"skill","title":"cometchat-ios-theming","tagline":"Customize the look and feel of CometChat iOS UI Kit — colors, fonts, styles, and dark mode support.","description":"## Purpose\n\nThis skill teaches how to customize the visual appearance of CometChat iOS UI Kit components. It covers global theming, component-level styling, dark mode support, and creating custom themes.\n\n---\n\n## 1. Global Theme Configuration\n\nCometChat iOS UI Kit uses `CometChatTheme` for global styling. Configure it early in your app lifecycle, before showing any CometChat UI.\n\n### Primary Colors\n\n```swift\nimport CometChatUIKitSwift\n\n// Set primary brand color\nCometChatTheme.primaryColor = UIColor.systemBlue\n\n// Set extended palette (50-900 scale)\nCometChatTheme.extendedPrimaryColor50 = UIColor.systemBlue.withAlphaComponent(0.05)\nCometChatTheme.extendedPrimaryColor100 = UIColor.systemBlue.withAlphaComponent(0.1)\nCometChatTheme.extendedPrimaryColor200 = UIColor.systemBlue.withAlphaComponent(0.2)\nCometChatTheme.extendedPrimaryColor300 = UIColor.systemBlue.withAlphaComponent(0.3)\nCometChatTheme.extendedPrimaryColor400 = UIColor.systemBlue.withAlphaComponent(0.4)\nCometChatTheme.extendedPrimaryColor500 = UIColor.systemBlue.withAlphaComponent(0.5)\nCometChatTheme.extendedPrimaryColor600 = UIColor.systemBlue.withAlphaComponent(0.6)\nCometChatTheme.extendedPrimaryColor700 = UIColor.systemBlue.withAlphaComponent(0.7)\nCometChatTheme.extendedPrimaryColor800 = UIColor.systemBlue.withAlphaComponent(0.8)\nCometChatTheme.extendedPrimaryColor900 = UIColor.systemBlue.withAlphaComponent(0.9)\n```\n\n### Background Colors\n\n```swift\n// Main backgrounds (01 = primary, 02 = secondary, etc.)\nCometChatTheme.backgroundColor01 = UIColor.systemBackground\nCometChatTheme.backgroundColor02 = UIColor.secondarySystemBackground\nCometChatTheme.backgroundColor03 = UIColor.tertiarySystemBackground\nCometChatTheme.backgroundColor04 = UIColor.quaternarySystemFill\n```\n\n### Text Colors\n\n```swift\n// Text hierarchy\nCometChatTheme.textColorPrimary = UIColor.label\nCometChatTheme.textColorSecondary = UIColor.secondaryLabel\nCometChatTheme.textColorTertiary = UIColor.tertiaryLabel\nCometChatTheme.textColorDisabled = UIColor.placeholderText\nCometChatTheme.textColorWhite = UIColor.white\nCometChatTheme.textColorHighlight = UIColor.systemBlue\n```\n\n### Icon Colors\n\n```swift\nCometChatTheme.iconColorPrimary = UIColor.label\nCometChatTheme.iconColorSecondary = UIColor.secondaryLabel\nCometChatTheme.iconColorTertiary = UIColor.tertiaryLabel\nCometChatTheme.iconColorWhite = UIColor.white\nCometChatTheme.iconColorHighlight = UIColor.systemBlue\n```\n\n### Border Colors\n\n```swift\nCometChatTheme.borderColorDefault = UIColor.separator\nCometChatTheme.borderColorLight = UIColor.separator.withAlphaComponent(0.5)\nCometChatTheme.borderColorDark = UIColor.opaqueSeparator\nCometChatTheme.borderColorHighlight = UIColor.systemBlue\n```\n\n### Status Colors\n\n```swift\nCometChatTheme.successColor = UIColor.systemGreen\nCometChatTheme.warningColor = UIColor.systemOrange\nCometChatTheme.errorColor = UIColor.systemRed\nCometChatTheme.infoColor = UIColor.systemBlue\n```\n\n### Neutral Colors (50-900 scale)\n\n```swift\nCometChatTheme.neutralColor50 = UIColor.systemGray6\nCometChatTheme.neutralColor100 = UIColor.systemGray5\nCometChatTheme.neutralColor200 = UIColor.systemGray4\nCometChatTheme.neutralColor300 = UIColor.systemGray3\nCometChatTheme.neutralColor400 = UIColor.systemGray2\nCometChatTheme.neutralColor500 = UIColor.systemGray\nCometChatTheme.neutralColor600 = UIColor.darkGray\nCometChatTheme.neutralColor700 = UIColor.gray\nCometChatTheme.neutralColor800 = UIColor.lightGray\nCometChatTheme.neutralColor900 = UIColor.black\n```\n\n---\n\n## 2. Typography\n\n### Font Configuration\n\n```swift\nimport CometChatUIKitSwift\n\n// Set custom font family — class func, NOT a settable property\nCometChatTypography.setFont(name: \"Avenir\")\n\n// Or customize individual text styles\nCometChatTypography.Heading1.bold = UIFont.systemFont(ofSize: 28, weight: .bold)\nCometChatTypography.Heading2.bold = UIFont.systemFont(ofSize: 24, weight: .bold)\nCometChatTypography.Heading3.bold = UIFont.systemFont(ofSize: 20, weight: .bold)\nCometChatTypography.Heading4.medium = UIFont.systemFont(ofSize: 18, weight: .medium)\n\nCometChatTypography.Body.regular = UIFont.systemFont(ofSize: 16, weight: .regular)\nCometChatTypography.Body.medium = UIFont.systemFont(ofSize: 16, weight: .medium)\nCometChatTypography.Body.bold = UIFont.systemFont(ofSize: 16, weight: .bold)\n\nCometChatTypography.Caption1.regular = UIFont.systemFont(ofSize: 14, weight: .regular)\nCometChatTypography.Caption1.medium = UIFont.systemFont(ofSize: 14, weight: .medium)\n\nCometChatTypography.Caption2.regular = UIFont.systemFont(ofSize: 12, weight: .regular)\nCometChatTypography.Caption2.medium = UIFont.systemFont(ofSize: 12, weight: .medium)\n```\n\n### Using Custom Fonts\n\n```swift\n// Register custom fonts in Info.plist first under \"Fonts provided by application\"\n// Then set them in CometChatTypography\n\nCometChatTypography.Heading1.bold = UIFont(name: \"CustomFont-Bold\", size: 28) ?? .systemFont(ofSize: 28, weight: .bold)\nCometChatTypography.Body.regular = UIFont(name: \"CustomFont-Regular\", size: 16) ?? .systemFont(ofSize: 16, weight: .regular)\n```\n\n---\n\n## 3. Spacing\n\nCometChat uses nested classes for spacing configuration.\n\n### Spacing Configuration\n\n```swift\nimport CometChatUIKitSwift\n\n// Configure spacing scale (s = base, s1-s20 = increments)\nCometChatSpacing.Spacing.s = 2    // Base spacing\nCometChatSpacing.Spacing.s1 = 4\nCometChatSpacing.Spacing.s2 = 8\nCometChatSpacing.Spacing.s3 = 12\nCometChatSpacing.Spacing.s4 = 16\nCometChatSpacing.Spacing.s5 = 20\nCometChatSpacing.Spacing.s6 = 24\nCometChatSpacing.Spacing.s7 = 28\nCometChatSpacing.Spacing.s8 = 32\nCometChatSpacing.Spacing.s9 = 36\nCometChatSpacing.Spacing.s10 = 40\n\n// Padding (p = base, p1-p10 = increments)\nCometChatSpacing.Padding.p = 2\nCometChatSpacing.Padding.p1 = 4\nCometChatSpacing.Padding.p2 = 8\nCometChatSpacing.Padding.p3 = 12\nCometChatSpacing.Padding.p4 = 16\nCometChatSpacing.Padding.p5 = 20\nCometChatSpacing.Padding.p6 = 24\n\n// Radius (r = base, r1-r6 = increments, rMax = fully rounded)\nCometChatSpacing.Radius.r = 2\nCometChatSpacing.Radius.r1 = 4\nCometChatSpacing.Radius.r2 = 8\nCometChatSpacing.Radius.r3 = 12\nCometChatSpacing.Radius.r4 = 16\nCometChatSpacing.Radius.r5 = 20\nCometChatSpacing.Radius.r6 = 24\nCometChatSpacing.Radius.rMax = 1000  // Fully rounded\n\n// Margin (m = base, m1-m20 = increments)\nCometChatSpacing.Margin.m = 2\nCometChatSpacing.Margin.m1 = 4\nCometChatSpacing.Margin.m2 = 8\nCometChatSpacing.Margin.m3 = 12\nCometChatSpacing.Margin.m4 = 16\n```\n\n### Using Spacing Values\n\n```swift\n// Use spacing values in your layouts\nlet padding = CometChatSpacing.Padding.p3  // 12 points\nlet cornerRadius = CometChatSpacing.Radius.r2  // 8 points\n\n// Use in CometChatCornerStyle\nlet style = CometChatCornerStyle(cornerRadius: CometChatSpacing.Radius.r2)\n```\n\n---\n\n## 4. Component-Level Styling\n\nEach CometChat component has a static `style` property. Modify these to customize appearance globally.\n\n### CometChatConversations Style\n\n```swift\n// ConversationsStyle properties\nCometChatConversations.style.backgroundColor = .systemBackground\nCometChatConversations.style.borderWidth = 0\nCometChatConversations.style.borderColor = .clear\nCometChatConversations.style.cornerRadius = CometChatCornerStyle(cornerRadius: 0)\n\n// Title styling\nCometChatConversations.style.titleFont = CometChatTypography.Heading4.medium\nCometChatConversations.style.titleColor = CometChatTheme.textColorPrimary\nCometChatConversations.style.largeTitleFont = CometChatTypography.Heading1.bold\nCometChatConversations.style.largeTitleColor = CometChatTheme.textColorPrimary\n\n// List item styling\nCometChatConversations.style.listItemTitleTextColor = CometChatTheme.textColorPrimary\nCometChatConversations.style.listItemTitleFont = CometChatTypography.Heading4.medium\nCometChatConversations.style.listItemSubTitleTextColor = CometChatTheme.textColorSecondary\nCometChatConversations.style.listItemSubTitleFont = CometChatTypography.Body.regular\nCometChatConversations.style.listItemBackground = .clear\nCometChatConversations.style.listItemSelectedBackground = CometChatTheme.backgroundColor04\n\n// Empty state styling\nCometChatConversations.style.emptyTitleTextFont = CometChatTypography.Heading3.bold\nCometChatConversations.style.emptyTitleTextColor = CometChatTheme.textColorPrimary\nCometChatConversations.style.emptySubTitleFont = CometChatTypography.Body.regular\nCometChatConversations.style.emptySubTitleTextColor = CometChatTheme.textColorSecondary\n\n// Error state styling\nCometChatConversations.style.errorTitleTextFont = CometChatTypography.Heading3.bold\nCometChatConversations.style.errorTitleTextColor = CometChatTheme.textColorPrimary\nCometChatConversations.style.errorSubTitleFont = CometChatTypography.Body.regular\nCometChatConversations.style.errorSubTitleTextColor = CometChatTheme.textColorSecondary\n\n// Retry button styling\nCometChatConversations.style.retryButtonTextColor = CometChatTheme.buttonTextColor\nCometChatConversations.style.retryButtonTextFont = CometChatTypography.Button.medium\nCometChatConversations.style.retryButtonBackgroundColor = CometChatTheme.primaryColor\n\n// Group type icons\nCometChatConversations.style.privateGroupImageTintColor = CometChatTheme.backgroundColor01\nCometChatConversations.style.privateGroupImageBackgroundColor = CometChatTheme.successColor\nCometChatConversations.style.passwordGroupImageTintColor = CometChatTheme.backgroundColor01\nCometChatConversations.style.passwordGroupImageBackgroundColor = CometChatTheme.warningColor\n\n// Message type icon\nCometChatConversations.style.messageTypeImageTint = CometChatTheme.iconColorSecondary\n```\n\n### CometChatMessageList Style\n\n```swift\n// MessageListStyle properties\nCometChatMessageList.style.backgroundColor = CometChatTheme.backgroundColor02\nCometChatMessageList.style.borderWidth = 0\nCometChatMessageList.style.borderColor = .clear\n\n// Shimmer loading colors\nCometChatMessageList.style.shimmerGradientColor1 = CometChatTheme.backgroundColor04\nCometChatMessageList.style.shimmerGradientColor2 = CometChatTheme.backgroundColor03\n\n// Empty state styling\nCometChatMessageList.style.emptyStateTitleColor = CometChatTheme.textColorPrimary\nCometChatMessageList.style.emptyStateTitleFont = CometChatTypography.Heading3.bold\nCometChatMessageList.style.emptyStateSubtitleColor = CometChatTheme.textColorSecondary\nCometChatMessageList.style.emptyStateSubtitleFont = CometChatTypography.Body.regular\n\n// Error state styling\nCometChatMessageList.style.errorStateTitleColor = CometChatTheme.textColorPrimary\nCometChatMessageList.style.errorStateTitleFont = CometChatTypography.Heading3.bold\nCometChatMessageList.style.errorStateSubtitleColor = CometChatTheme.textColorSecondary\nCometChatMessageList.style.errorStateSubtitleFont = CometChatTypography.Body.regular\n\n// New message indicator\nCometChatMessageList.style.newMessageIndicatorTextColor = CometChatTheme.errorColor\nCometChatMessageList.style.newMessageIndicatorBackgroundColor = CometChatTheme.errorColor\nCometChatMessageList.style.newMessageIndicatorTextFont = CometChatTypography.Caption1.medium\n\n// Background image (optional)\nCometChatMessageList.style.backgroundImage = UIImage(named: \"chat-background\")\n```\n\n### CometChatMessageBubble Style\n\nMessage bubbles use separate styles for incoming and outgoing messages:\n\n```swift\n// OUTGOING message bubble (sent by current user)\nCometChatMessageBubble.style.outgoing.backgroundColor = CometChatTheme.primaryColor\nCometChatMessageBubble.style.outgoing.borderWidth = 0\nCometChatMessageBubble.style.outgoing.borderColor = .clear\nCometChatMessageBubble.style.outgoing.cornerRadius = CometChatCornerStyle(cornerRadius: 16)\nCometChatMessageBubble.style.outgoing.headerTextColor = CometChatTheme.primaryColor\nCometChatMessageBubble.style.outgoing.headerTextFont = CometChatTypography.Caption1.medium\n\n// INCOMING message bubble (received from others)\nCometChatMessageBubble.style.incoming.backgroundColor = CometChatTheme.neutralColor300\nCometChatMessageBubble.style.incoming.borderWidth = 0\nCometChatMessageBubble.style.incoming.borderColor = .clear\nCometChatMessageBubble.style.incoming.cornerRadius = CometChatCornerStyle(cornerRadius: 16)\nCometChatMessageBubble.style.incoming.headerTextColor = CometChatTheme.primaryColor\nCometChatMessageBubble.style.incoming.headerTextFont = CometChatTypography.Caption1.medium\n\n// Text bubble styling within message bubbles\nCometChatMessageBubble.style.outgoing.textBubbleStyle.textColor = .white\nCometChatMessageBubble.style.outgoing.textBubbleStyle.textFont = CometChatTypography.Body.regular\n\nCometChatMessageBubble.style.incoming.textBubbleStyle.textColor = CometChatTheme.textColorPrimary\nCometChatMessageBubble.style.incoming.textBubbleStyle.textFont = CometChatTypography.Body.regular\n```\n\n### CometChatMessageComposer Style\n\n```swift\n// MessageComposerStyle properties\nCometChatMessageComposer.style.backgroundColor = CometChatTheme.backgroundColor03\nCometChatMessageComposer.style.borderWidth = 0\nCometChatMessageComposer.style.borderColor = .clear\n\n// Text input styling\nCometChatMessageComposer.style.placeHolderTextFont = CometChatTypography.Body.regular\nCometChatMessageComposer.style.placeHolderTextColor = CometChatTheme.textColorTertiary\nCometChatMessageComposer.style.textFiledColor = CometChatTheme.textColorPrimary\nCometChatMessageComposer.style.textFiledFont = CometChatTypography.Body.regular\n\n// Compose box styling\nCometChatMessageComposer.style.composeBoxBackgroundColor = CometChatTheme.backgroundColor01\nCometChatMessageComposer.style.composeBoxBorderColor = CometChatTheme.borderColorDefault\nCometChatMessageComposer.style.composeBoxBorderWidth = 1\nCometChatMessageComposer.style.composerBoxCornerRadius = CometChatCornerStyle(cornerRadius: CometChatSpacing.Radius.r2)\nCometChatMessageComposer.style.composerSeparatorColor = CometChatTheme.borderColorLight\n\n// Send button styling\nCometChatMessageComposer.style.sendButtonImageTint = CometChatTheme.white\nCometChatMessageComposer.style.activeSendButtonImageBackgroundColor = CometChatTheme.primaryColor\nCometChatMessageComposer.style.inactiveSendButtonImageBackgroundColor = CometChatTheme.neutralColor300\n\n// Attachment button styling\nCometChatMessageComposer.style.attachmentImageTint = CometChatTheme.iconColorSecondary\n\n// Voice recording button styling\nCometChatMessageComposer.style.voiceRecordingImageTint = CometChatTheme.iconColorSecondary\n\n// AI button styling\nCometChatMessageComposer.style.aiImageTint = CometChatTheme.iconColorSecondary\n\n// Sticker button styling\nCometChatMessageComposer.style.stickerTint = CometChatTheme.iconColorSecondary\n\n// Edit preview styling\nCometChatMessageComposer.style.editPreviewTitleTextFont = CometChatTypography.Body.regular\nCometChatMessageComposer.style.editPreviewTitleTextColor = CometChatTheme.textColorPrimary\nCometChatMessageComposer.style.editPreviewMessageTextFont = CometChatTypography.Caption1.regular\nCometChatMessageComposer.style.editPreviewMessageTextColor = CometChatTheme.textColorSecondary\nCometChatMessageComposer.style.editPreviewBackgroundColor = CometChatTheme.backgroundColor03\nCometChatMessageComposer.style.editPreviewBorderColor = CometChatTheme.borderColorHighlight\nCometChatMessageComposer.style.editPreviewCloseIconTint = CometChatTheme.iconColorHighlight\n```\n\n### CometChatAvatar Style\n\n```swift\n// AvatarStyle properties\nCometChatAvatar.style.backgroundColor = CometChatTheme.extendedPrimaryColor500\nCometChatAvatar.style.textColor = CometChatTheme.white\nCometChatAvatar.style.textFont = CometChatTypography.Heading2.bold\nCometChatAvatar.style.borderColor = .clear\nCometChatAvatar.style.borderWidth = 0\nCometChatAvatar.style.cornerRadius = nil // nil = circle by default\n```\n\n### CometChatBadge Style\n\n```swift\n// BadgeStyle properties\nCometChatBadge.style.backgroundColor = CometChatTheme.primaryColor\nCometChatBadge.style.textColor = CometChatTheme.buttonIconColor\nCometChatBadge.style.textFont = CometChatTypography.Caption1.regular\nCometChatBadge.style.cornerRadius = nil // nil = pill shape by default\nCometChatBadge.style.borderWidth = 0.5\nCometChatBadge.style.borderColor = UIColor.clear.cgColor\n```\n\n### CometChatStatusIndicator Style\n\n```swift\n// StatusIndicatorStyle properties\nCometChatStatusIndicator.style.backgroundColor = CometChatTheme.successColor\nCometChatStatusIndicator.style.borderColor = CometChatTheme.backgroundColor01\nCometChatStatusIndicator.style.borderWidth = 0\nCometChatStatusIndicator.style.cornerRadius = nil // nil = circle by default\nCometChatStatusIndicator.style.backgroundImage = nil\n```\n\n### CometChatDate Style\n\n```swift\n// DateStyle properties\nCometChatDate.style.textColor = CometChatTheme.textColorPrimary\nCometChatDate.style.textFont = CometChatTypography.Caption1.medium\nCometChatDate.style.backgroundColor = CometChatTheme.backgroundColor02\nCometChatDate.style.borderWidth = 1\nCometChatDate.style.borderColor = CometChatTheme.borderColorDark\nCometChatDate.style.cornerRadius = nil\n```\n\n### CometChatReceipt Style\n\n```swift\n// ReceiptStyle properties\nCometChatReceipt.style.waitImageTintColor = CometChatTheme.iconColorSecondary\nCometChatReceipt.style.sentImageTintColor = CometChatTheme.iconColorSecondary\nCometChatReceipt.style.deliveredImageTintColor = CometChatTheme.iconColorSecondary\nCometChatReceipt.style.readImageTintColor = CometChatTheme.messageReadColor\nCometChatReceipt.style.errorImageTintColor = CometChatTheme.iconColorSecondary\n\n// Custom receipt images (optional)\nCometChatReceipt.style.waitImage = UIImage(systemName: \"clock\")?.withRenderingMode(.alwaysTemplate) ?? UIImage()\nCometChatReceipt.style.sentImage = UIImage(systemName: \"checkmark\")?.withRenderingMode(.alwaysTemplate) ?? UIImage()\nCometChatReceipt.style.deliveredImage = UIImage(systemName: \"checkmark.circle\")?.withRenderingMode(.alwaysTemplate) ?? UIImage()\nCometChatReceipt.style.readImage = UIImage(systemName: \"checkmark.circle.fill\")?.withRenderingMode(.alwaysTemplate) ?? UIImage()\n```\n\n---\n\n## 5. Dark Mode Support\n\nCometChat automatically supports dark mode when using system colors. For custom colors, use dynamic colors:\n\n### Using Dynamic Colors\n\n```swift\n// Create a dynamic color that adapts to light/dark mode\nlet dynamicPrimary = UIColor { traitCollection in\n    switch traitCollection.userInterfaceStyle {\n    case .dark:\n        return UIColor(red: 0.4, green: 0.6, blue: 1.0, alpha: 1.0)\n    default:\n        return UIColor(red: 0.0, green: 0.4, blue: 0.8, alpha: 1.0)\n    }\n}\n\nCometChatTheme.primaryColor = dynamicPrimary\n```\n\n### Using Asset Catalog Colors\n\n1. Create a Color Set in your asset catalog\n2. Configure appearances for Any, Light, and Dark\n3. Reference in code:\n\n```swift\nCometChatTheme.primaryColor = UIColor(named: \"BrandPrimary\") ?? .systemBlue\nCometChatTheme.backgroundColor01 = UIColor(named: \"Background\") ?? .systemBackground\n```\n\n### Complete Theme Configuration Function\n\n```swift\nfunc configureCometChatTheme() {\n    // Primary color with dark mode support\n    CometChatTheme.primaryColor = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.35, green: 0.55, blue: 0.93, alpha: 1.0)\n            : UIColor(red: 0.2, green: 0.4, blue: 0.8, alpha: 1.0)\n    }\n    \n    // Backgrounds\n    CometChatTheme.backgroundColor01 = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.11, green: 0.11, blue: 0.12, alpha: 1.0)\n            : UIColor.white\n    }\n    \n    CometChatTheme.backgroundColor02 = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.17, green: 0.17, blue: 0.18, alpha: 1.0)\n            : UIColor(red: 0.95, green: 0.95, blue: 0.97, alpha: 1.0)\n    }\n    \n    // Text colors\n    CometChatTheme.textColorPrimary = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor.white\n            : UIColor.black\n    }\n    \n    CometChatTheme.textColorSecondary = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.56, green: 0.56, blue: 0.58, alpha: 1.0)\n            : UIColor(red: 0.42, green: 0.42, blue: 0.45, alpha: 1.0)\n    }\n}\n```\n\n---\n\n## 6. Preset Theme Examples\n\n### WhatsApp-like Theme\n\n```swift\nfunc applyWhatsAppTheme() {\n    // Primary green\n    CometChatTheme.primaryColor = UIColor(red: 0.15, green: 0.83, blue: 0.4, alpha: 1.0)\n    \n    // Backgrounds\n    CometChatTheme.backgroundColor01 = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.07, green: 0.11, blue: 0.13, alpha: 1.0)\n            : UIColor.white\n    }\n    \n    CometChatTheme.backgroundColor02 = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.12, green: 0.17, blue: 0.2, alpha: 1.0)\n            : UIColor(red: 0.94, green: 0.95, blue: 0.96, alpha: 1.0)\n    }\n    \n    // Outgoing message bubble (green)\n    CometChatMessageBubble.style.outgoing.backgroundColor = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.0, green: 0.36, blue: 0.29, alpha: 1.0)\n            : UIColor(red: 0.86, green: 0.97, blue: 0.78, alpha: 1.0)\n    }\n    \n    CometChatMessageBubble.style.outgoing.textBubbleStyle.textColor = UIColor { trait in\n        trait.userInterfaceStyle == .dark ? .white : .black\n    }\n    \n    // Incoming message bubble\n    CometChatMessageBubble.style.incoming.backgroundColor = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.12, green: 0.17, blue: 0.2, alpha: 1.0)\n            : UIColor.white\n    }\n}\n```\n\n### iMessage-like Theme\n\n```swift\nfunc applyiMessageTheme() {\n    // Blue primary\n    CometChatTheme.primaryColor = UIColor(red: 0.0, green: 0.48, blue: 1.0, alpha: 1.0)\n    \n    // Outgoing message bubble (blue)\n    CometChatMessageBubble.style.outgoing.backgroundColor = UIColor(red: 0.0, green: 0.48, blue: 1.0, alpha: 1.0)\n    CometChatMessageBubble.style.outgoing.textBubbleStyle.textColor = .white\n    CometChatMessageBubble.style.outgoing.cornerRadius = CometChatCornerStyle(cornerRadius: 18)\n    \n    // Incoming message bubble (gray)\n    CometChatMessageBubble.style.incoming.backgroundColor = UIColor { trait in\n        trait.userInterfaceStyle == .dark\n            ? UIColor(red: 0.23, green: 0.23, blue: 0.24, alpha: 1.0)\n            : UIColor(red: 0.91, green: 0.91, blue: 0.92, alpha: 1.0)\n    }\n    CometChatMessageBubble.style.incoming.textBubbleStyle.textColor = UIColor { trait in\n        trait.userInterfaceStyle == .dark ? .white : .black\n    }\n    CometChatMessageBubble.style.incoming.cornerRadius = CometChatCornerStyle(cornerRadius: 18)\n}\n```\n\n---\n\n## 7. Instance-Level Styling\n\nFor styling specific instances without affecting global styles:\n\n```swift\n// Create a conversations list with custom style\nlet conversations = CometChatConversations()\n\n// Override style for this instance only\nconversations.style.backgroundColor = UIColor.systemPink.withAlphaComponent(0.1)\nconversations.style.listItemTitleTextColor = .systemPink\n\n// Avatar style for this instance\nconversations.avatarStyle.backgroundColor = UIColor.systemPink.withAlphaComponent(0.2)\n```\n\n---\n\n## 8. Helper Extension\n\n```swift\nextension UIColor {\n    convenience init(hex: String) {\n        var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)\n        hexSanitized = hexSanitized.replacingOccurrences(of: \"#\", with: \"\")\n        \n        var rgb: UInt64 = 0\n        Scanner(string: hexSanitized).scanHexInt64(&rgb)\n        \n        let r = CGFloat((rgb & 0xFF0000) >> 16) / 255.0\n        let g = CGFloat((rgb & 0x00FF00) >> 8) / 255.0\n        let b = CGFloat(rgb & 0x0000FF) / 255.0\n        \n        self.init(red: r, green: g, blue: b, alpha: 1.0)\n    }\n}\n```\n\n---\n\n## Best Practices\n\n1. **Configure theme early** — Set theme in `application(_:didFinishLaunchingWithOptions:)` before any CometChat UI is shown\n2. **Use system colors** — They automatically adapt to dark mode\n3. **Test both modes** — Always verify appearance in light and dark mode\n4. **Use dynamic colors** — For custom colors that need to adapt to appearance changes\n5. **Maintain contrast** — Ensure text is readable against backgrounds (WCAG guidelines)\n6. **Be consistent** — Use the same color palette throughout your app\n7. **Consider accessibility** — Support Dynamic Type by not hardcoding font sizes where possible","tags":["cometchat","ios","theming","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-ios-theming","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-ios-theming","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (24,242 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:53.634Z","embedding":null,"createdAt":"2026-05-07T13:05:13.628Z","updatedAt":"2026-05-18T19:04:53.634Z","lastSeenAt":"2026-05-18T19:04:53.634Z","tsv":"'-900':93,199 '0':560,566,647,722,742,775,866,905,1453 '0.0':1033,1266,1321,1335 '0.05':97 '0.07':1222 '0.1':100,1420 '0.11':1124,1126,1224 '0.12':1128,1238,1301 '0.13':1226 '0.15':1206 '0.17':1140,1142,1240,1303 '0.18':1144 '0.2':103,1108,1242,1305,1430 '0.23':1360,1362 '0.24':1364 '0.29':1270 '0.3':106 '0.35':1099 '0.36':1268 '0.4':109,1022,1035,1110,1210 '0.42':1183,1185 '0.45':1187 '0.48':1323,1337 '0.5':112,180,892 '0.55':1101 '0.56':1174,1176 '0.58':1178 '0.6':115,1024 '0.7':118 '0.78':1279 '0.8':121,1037,1112 '0.83':1208 '0.86':1275 '0.9':124 '0.91':1369,1371 '0.92':1373 '0.93':1103 '0.94':1247 '0.95':1149,1151,1249 '0.96':1251 '0.97':1153,1277 '01':130 '02':132 '0x0000ff':1477 '0x00ff00':1470 '0xff0000':1463 '1':53,797,926,1046,1490 '1.0':1026,1028,1039,1105,1114,1130,1146,1155,1180,1189,1212,1228,1244,1253,1272,1281,1307,1325,1327,1339,1341,1366,1375,1487 '1000':477 '12':304,310,395,435,466,498,516 '14':292,298 '16':274,280,286,353,356,398,438,469,501,728,748,1464 '18':268,1347,1387 '2':222,384,426,457,489,1055,1505 '20':262,401,441,472 '24':256,404,444,475 '255.0':1465,1472,1478 '28':250,340,343,407 '3':359,1063,1515 '32':410 '36':413 '4':389,429,460,492,533,1527 '40':416 '5':978,1541 '50':92,198 '6':1190,1552 '7':1388,1563 '8':392,432,463,495,522,1431,1471 'access':1565 'adapt':1006,1511,1537 'affect':1398 'ai':825 'alpha':1027,1038,1104,1113,1129,1145,1154,1179,1188,1211,1227,1243,1252,1271,1280,1306,1326,1340,1365,1374,1486 'alway':1519 'alwaystempl':955,962,969,976 'app':71,1562 'appear':31,550,1057,1521,1539 'applic':327,1497 'applyimessagethem':1315 'applywhatsappthem':1200 'asset':1043,1053 'attach':814 'automat':983,1510 'avatar':1423 'avatarstyl':855 'avenir':241 'b':1474,1485 'background':125,129,690,698,1076,1115,1213,1549 'badgestyl':876 'base':377,385,419,447,482 'best':1488 'black':1289,1383 'blue':1025,1036,1102,1111,1127,1143,1152,1177,1186,1209,1225,1241,1250,1269,1278,1304,1316,1324,1331,1338,1363,1372,1484 'bold':252,258,264,288,338,345 'border':173 'box':790 'brand':85 'brandprimari':1071 'bubbl':702,714,735,754,758,1256,1292,1330,1350 'button':615,806,815,821,826,831 'case':1017 'catalog':1044,1054 'cgfloat':1461,1468,1475 'chang':1540 'chat':697 'chat-background':696 'checkmark':960 'checkmark.circle':967 'checkmark.circle.fill':974 'circl':870,909 'class':233,364 'clear':562,589,649,724,744,777,864 'clock':953 'code':1066 'color':15,79,86,126,144,161,174,186,197,652,990,993,996,999,1004,1045,1049,1086,1157,1508,1530,1533,1558 'cometchat':2,11,33,57,76,361,539,982,1501 'cometchat-ios-them':1 'cometchatavatar':852 'cometchatavatar.style.backgroundcolor':857 'cometchatavatar.style.bordercolor':863 'cometchatavatar.style.borderwidth':865 'cometchatavatar.style.cornerradius':867 'cometchatavatar.style.textcolor':859 'cometchatavatar.style.textfont':861 'cometchatbadg':873 'cometchatbadge.style.backgroundcolor':878 'cometchatbadge.style.bordercolor':893 'cometchatbadge.style.borderwidth':891 'cometchatbadge.style.cornerradius':884 'cometchatbadge.style.textcolor':880 'cometchatbadge.style.textfont':882 'cometchatconvers':552,1411 'cometchatconversations.style.backgroundcolor':557 'cometchatconversations.style.bordercolor':561 'cometchatconversations.style.borderwidth':559 'cometchatconversations.style.cornerradius':563 'cometchatconversations.style.emptysubtitlefont':599 'cometchatconversations.style.emptysubtitletextcolor':601 'cometchatconversations.style.emptytitletextcolor':597 'cometchatconversations.style.emptytitletextfont':595 'cometchatconversations.style.errorsubtitlefont':610 'cometchatconversations.style.errorsubtitletextcolor':612 'cometchatconversations.style.errortitletextcolor':608 'cometchatconversations.style.errortitletextfont':606 'cometchatconversations.style.largetitlecolor':575 'cometchatconversations.style.largetitlefont':573 'cometchatconversations.style.listitembackground':588 'cometchatconversations.style.listitemselectedbackground':590 'cometchatconversations.style.listitemsubtitlefont':586 'cometchatconversations.style.listitemsubtitletextcolor':584 'cometchatconversations.style.listitemtitlefont':582 'cometchatconversations.style.listitemtitletextcolor':580 'cometchatconversations.style.messagetypeimagetint':637 'cometchatconversations.style.passwordgroupimagebackgroundcolor':632 'cometchatconversations.style.passwordgroupimagetintcolor':630 'cometchatconversations.style.privategroupimagebackgroundcolor':628 'cometchatconversations.style.privategroupimagetintcolor':626 'cometchatconversations.style.retrybuttonbackgroundcolor':621 'cometchatconversations.style.retrybuttontextcolor':617 'cometchatconversations.style.retrybuttontextfont':619 'cometchatconversations.style.titlecolor':571 'cometchatconversations.style.titlefont':569 'cometchatcornerstyl':526,529,564,726,746,799,1345,1385 'cometchatd':914 'cometchatdate.style.backgroundcolor':923 'cometchatdate.style.bordercolor':927 'cometchatdate.style.borderwidth':925 'cometchatdate.style.cornerradius':929 'cometchatdate.style.textcolor':919 'cometchatdate.style.textfont':921 'cometchatmessagebubbl':699 'cometchatmessagebubble.style.incoming.backgroundcolor':739,1293,1352 'cometchatmessagebubble.style.incoming.bordercolor':743 'cometchatmessagebubble.style.incoming.borderwidth':741 'cometchatmessagebubble.style.incoming.cornerradius':745,1384 'cometchatmessagebubble.style.incoming.headertextcolor':749 'cometchatmessagebubble.style.incoming.headertextfont':751 'cometchatmessagebubble.style.incoming.textbubblestyle.textcolor':763,1376 'cometchatmessagebubble.style.incoming.textbubblestyle.textfont':765 'cometchatmessagebubble.style.outgoing.backgroundcolor':719,1258,1332 'cometchatmessagebubble.style.outgoing.bordercolor':723 'cometchatmessagebubble.style.outgoing.borderwidth':721 'cometchatmessagebubble.style.outgoing.cornerradius':725,1344 'cometchatmessagebubble.style.outgoing.headertextcolor':729 'cometchatmessagebubble.style.outgoing.headertextfont':731 'cometchatmessagebubble.style.outgoing.textbubblestyle.textcolor':759,1282,1342 'cometchatmessagebubble.style.outgoing.textbubblestyle.textfont':761 'cometchatmessagecompos':767 'cometchatmessagecomposer.style.activesendbuttonimagebackgroundcolor':810 'cometchatmessagecomposer.style.aiimagetint':828 'cometchatmessagecomposer.style.attachmentimagetint':817 'cometchatmessagecomposer.style.backgroundcolor':772 'cometchatmessagecomposer.style.bordercolor':776 'cometchatmessagecomposer.style.borderwidth':774 'cometchatmessagecomposer.style.composeboxbackgroundcolor':792 'cometchatmessagecomposer.style.composeboxbordercolor':794 'cometchatmessagecomposer.style.composeboxborderwidth':796 'cometchatmessagecomposer.style.composerboxcornerradius':798 'cometchatmessagecomposer.style.composerseparatorcolor':803 'cometchatmessagecomposer.style.editpreviewbackgroundcolor':846 'cometchatmessagecomposer.style.editpreviewbordercolor':848 'cometchatmessagecomposer.style.editpreviewcloseicontint':850 'cometchatmessagecomposer.style.editpreviewmessagetextcolor':844 'cometchatmessagecomposer.style.editpreviewmessagetextfont':842 'cometchatmessagecomposer.style.editpreviewtitletextcolor':840 'cometchatmessagecomposer.style.editpreviewtitletextfont':838 'cometchatmessagecomposer.style.inactivesendbuttonimagebackgroundcolor':812 'cometchatmessagecomposer.style.placeholdertextcolor':783 'cometchatmessagecomposer.style.placeholdertextfont':781 'cometchatmessagecomposer.style.sendbuttonimagetint':808 'cometchatmessagecomposer.style.stickertint':833 'cometchatmessagecomposer.style.textfiledcolor':785 'cometchatmessagecomposer.style.textfiledfont':787 'cometchatmessagecomposer.style.voicerecordingimagetint':823 'cometchatmessagelist':639 'cometchatmessagelist.style':653,656 'cometchatmessagelist.style.backgroundcolor':644 'cometchatmessagelist.style.backgroundimage':693 'cometchatmessagelist.style.bordercolor':648 'cometchatmessagelist.style.borderwidth':646 'cometchatmessagelist.style.emptystatesubtitlecolor':666 'cometchatmessagelist.style.emptystatesubtitlefont':668 'cometchatmessagelist.style.emptystatetitlecolor':662 'cometchatmessagelist.style.emptystatetitlefont':664 'cometchatmessagelist.style.errorstatesubtitlecolor':677 'cometchatmessagelist.style.errorstatesubtitlefont':679 'cometchatmessagelist.style.errorstatetitlecolor':673 'cometchatmessagelist.style.errorstatetitlefont':675 'cometchatmessagelist.style.newmessageindicatorbackgroundcolor':686 'cometchatmessagelist.style.newmessageindicatortextcolor':684 'cometchatmessagelist.style.newmessageindicatortextfont':688 'cometchatreceipt':931 'cometchatreceipt.style.deliveredimage':964 'cometchatreceipt.style.deliveredimagetintcolor':940 'cometchatreceipt.style.errorimagetintcolor':944 'cometchatreceipt.style.readimage':971 'cometchatreceipt.style.readimagetintcolor':942 'cometchatreceipt.style.sentimage':957 'cometchatreceipt.style.sentimagetintcolor':938 'cometchatreceipt.style.waitimage':950 'cometchatreceipt.style.waitimagetintcolor':936 'cometchatspacing.margin':487,490,493,496,499 'cometchatspacing.padding':424,427,430,433,436,439,442,514 'cometchatspacing.radius':455,458,461,464,467,470,473,520,531,801 'cometchatspacing.radius.rmax':476 'cometchatspacing.spacing':382,387,390,393,396,399,402,405,408,411,414 'cometchatstatusind':895 'cometchatstatusindicator.style.backgroundcolor':900 'cometchatstatusindicator.style.backgroundimage':912 'cometchatstatusindicator.style.bordercolor':902 'cometchatstatusindicator.style.borderwidth':904 'cometchatstatusindicator.style.cornerradius':906 'cometchatthem':62 'cometchattheme.backgroundcolor01':135,627,631,793,903,1073,1116,1214 'cometchattheme.backgroundcolor02':137,645,924,1132,1230 'cometchattheme.backgroundcolor03':139,658,773,847 'cometchattheme.backgroundcolor04':141,591,655 'cometchattheme.bordercolordark':181,928 'cometchattheme.bordercolordefault':176,795 'cometchattheme.bordercolorhighlight':183,849 'cometchattheme.bordercolorlight':178,804 'cometchattheme.buttoniconcolor':881 'cometchattheme.buttontextcolor':618 'cometchattheme.errorcolor':192,685,687 'cometchattheme.extendedprimarycolor100':98 'cometchattheme.extendedprimarycolor200':101 'cometchattheme.extendedprimarycolor300':104 'cometchattheme.extendedprimarycolor400':107 'cometchattheme.extendedprimarycolor50':95 'cometchattheme.extendedprimarycolor500':110,858 'cometchattheme.extendedprimarycolor600':113 'cometchattheme.extendedprimarycolor700':116 'cometchattheme.extendedprimarycolor800':119 'cometchattheme.extendedprimarycolor900':122 'cometchattheme.iconcolorhighlight':171,851 'cometchattheme.iconcolorprimary':163 'cometchattheme.iconcolorsecondary':165,638,818,824,829,834,937,939,941,945 'cometchattheme.iconcolortertiary':167 'cometchattheme.iconcolorwhite':169 'cometchattheme.infocolor':194 'cometchattheme.messagereadcolor':943 'cometchattheme.neutralcolor100':204 'cometchattheme.neutralcolor200':206 'cometchattheme.neutralcolor300':208,740,813 'cometchattheme.neutralcolor400':210 'cometchattheme.neutralcolor50':202 'cometchattheme.neutralcolor500':212 'cometchattheme.neutralcolor600':214 'cometchattheme.neutralcolor700':216 'cometchattheme.neutralcolor800':218 'cometchattheme.neutralcolor900':220 'cometchattheme.primarycolor':87,622,720,730,750,811,879,1040,1068,1091,1203,1318 'cometchattheme.successcolor':188,629,901 'cometchattheme.textcolordisabled':154 'cometchattheme.textcolorhighlight':158 'cometchattheme.textcolorprimary':148,572,576,581,598,609,663,674,764,786,841,920,1158 'cometchattheme.textcolorsecondary':150,585,602,613,667,678,845,1166 'cometchattheme.textcolortertiary':152,784 'cometchattheme.textcolorwhite':156 'cometchattheme.warningcolor':190,633 'cometchattheme.white':809,860 'cometchattypographi':332 'cometchattypography.body.bold':283 'cometchattypography.body.medium':277 'cometchattypography.body.regular':271,346,587,600,611,669,680,762,766,782,788,839 'cometchattypography.button.medium':620 'cometchattypography.caption1.medium':295,689,732,752,922 'cometchattypography.caption1.regular':289,843,883 'cometchattypography.caption2.medium':307 'cometchattypography.caption2.regular':301 'cometchattypography.heading1.bold':247,333,574 'cometchattypography.heading2.bold':253,862 'cometchattypography.heading3.bold':259,596,607,665,676 'cometchattypography.heading4.medium':265,570,583 'cometchattypography.setfont':239 'cometchatuikitswift':82,228,372 'complet':1078 'compon':37,43,535,540 'component-level':42,534 'compos':789 'configur':56,66,225,367,369,373,1056,1080,1491 'configurecometchatthem':1084 'consid':1564 'consist':1554 'contrast':1543 'conveni':1437 'convers':1404,1410 'conversations.avatarstyle.backgroundcolor':1428 'conversations.style.backgroundcolor':1418 'conversations.style.listitemtitletextcolor':1421 'conversationsstyl':555 'cornerradius':519,530,565,727,747,800,1346,1386 'cover':39 'creat':50,1001,1047,1402 'current':717 'custom':5,28,51,230,243,314,318,549,946,992,1407,1532 'customfont':337,350 'customfont-bold':336 'customfont-regular':349 'dark':19,46,979,985,1018,1062,1088,1096,1121,1137,1163,1171,1219,1235,1263,1287,1298,1357,1381,1513,1525 'datestyl':917 'default':872,890,911,1029 'didfinishlaunchingwithopt':1498 'dynam':995,998,1003,1529,1567 'dynamicprimari':1011,1041 'earli':68,1493 'edit':835 'empti':592,659 'ensur':1544 'error':603,670 'etc':134 'exampl':1193 'extend':90 'extens':1433,1435 'famili':232 'feel':9 'first':322 'font':16,224,231,315,319,324,1572 'fulli':453,478 'func':234,1083,1199,1314 'function':1081 'g':1467,1483 'global':40,54,64,551,1399 'gray':1351 'green':1023,1034,1100,1109,1125,1141,1150,1175,1184,1202,1207,1223,1239,1248,1257,1267,1276,1302,1322,1336,1361,1370,1482 'group':623 'guidelin':1551 'hardcod':1571 'helper':1432 'hex':1439 'hex.trimmingcharacters':1443 'hexsanit':1442,1446,1456 'hexsanitized.replacingoccurrences':1447 'hierarchi':147 'icon':160,625,636 'imag':691,948 'imessag':1310 'imessage-lik':1309 'import':81,227,371 'incom':707,733,1290,1348 'increment':381,423,451,486 'indic':683 'individu':244 'info.plist':321 'init':1438 'input':779 'instanc':1390,1396,1416,1427 'instance-level':1389 'io':3,12,34,58 'item':578 'kit':14,36,60 'layout':511 'let':512,518,527,1010,1409,1459,1466,1473 'level':44,536,1391 'lifecycl':72 'light':1060,1523 'light/dark':1008 'like':1196,1311 'list':577,1405 'load':651 'look':7 'm':481,488 'm1':484,491 'm1-m20':483 'm2':494 'm20':485 'm3':497 'm4':500 'main':128 'maintain':1542 'margin':480 'medium':270,282,300,312 'messag':634,682,701,710,713,734,757,1255,1291,1329,1349 'messagecomposerstyl':770 'messageliststyl':642 'mode':20,47,980,986,1009,1089,1514,1518,1526 'modifi':546 'name':240,335,348,695,1070,1075 'need':1535 'nest':363 'neutral':196 'new':681 'nil':868,869,885,886,907,908,913,930 'ofsiz':249,255,261,267,273,279,285,291,297,303,309,342,355 'option':692,949 'other':738 'outgo':709,712,1254,1328 'overrid':1412 'p':418,425 'p1':421,428 'p1-p10':420 'p10':422 'p2':431 'p3':434,515 'p4':437 'p5':440 'p6':443 'pad':417,513 'palett':91,1559 'pill':887 'point':517,523 'possibl':1575 'practic':1489 'preset':1191 'preview':836 'primari':78,84,131,1085,1201,1317 'properti':238,545,556,643,771,856,877,899,918,935 'provid':325 'purpos':22 'r':446,456,1460,1481 'r1':449,459 'r1-r6':448 'r2':462,521,532,802 'r3':465 'r4':468 'r5':471 'r6':450,474 'radius':445 'readabl':1547 'receipt':947 'receiptstyl':934 'receiv':736 'record':820 'red':1021,1032,1098,1107,1123,1139,1148,1173,1182,1205,1221,1237,1246,1265,1274,1300,1320,1334,1359,1368,1480 'refer':1064 'regist':317 'regular':276,294,306,351,358 'retri':614 'return':1019,1030 'rgb':1451,1458,1462,1469,1476 'rmax':452 'round':454,479 's1':379,388 's1-s20':378 's10':415 's2':391 's20':380 's3':394 's4':397 's5':400 's6':403 's7':406 's8':409 's9':412 'scale':94,200,375 'scanhexint64':1457 'scanner':1454 'secondari':133 'self.init':1479 'send':805 'sent':715 'separ':704 'set':83,89,229,329,1050,1494 'settabl':237 'shape':888 'shimmer':650 'shimmergradientcolor1':654 'shimmergradientcolor2':657 'show':74 'shown':1504 'size':339,352,1573 'skill':24 'skill-cometchat-ios-theming' 'source-cometchat' 'space':360,366,368,374,386,503,507 'specif':1395 'state':593,604,660,671 'static':543 'status':185 'statusindicatorstyl':898 'sticker':830 'string':1440,1455 'style':17,45,65,246,528,537,544,553,568,579,594,605,616,640,661,672,700,705,755,768,780,791,807,816,822,827,832,837,853,874,896,915,932,1392,1394,1400,1408,1413,1424 'support':21,48,981,984,1090,1566 'swift':80,127,145,162,175,187,201,226,316,370,505,554,641,711,769,854,875,897,916,933,1000,1067,1082,1198,1313,1401,1434 'switch':1015 'system':989,1507 'systembackground':558,1077 'systemblu':1072 'systemfont':341,354 'systemnam':952,959,966,973 'systempink':1422 'teach':25 'test':1516 'text':143,146,245,753,778,1156,1545 'theme':4,41,52,55,1079,1192,1197,1312,1492,1495 'throughout':1560 'titl':567 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'trait':1093,1118,1134,1160,1168,1216,1232,1260,1284,1295,1354,1378 'trait.userinterfacestyle':1095,1120,1136,1162,1170,1218,1234,1262,1286,1297,1356,1380 'traitcollect':1013 'traitcollection.userinterfacestyle':1016 'type':624,635,1568 'typographi':223 'ui':13,35,59,77,1502 'uicolor':1012,1020,1031,1069,1074,1092,1097,1106,1117,1122,1133,1138,1147,1159,1167,1172,1181,1204,1215,1220,1231,1236,1245,1259,1264,1273,1283,1294,1299,1319,1333,1353,1358,1367,1377,1436 'uicolor.black':221,1165 'uicolor.clear.cgcolor':894 'uicolor.darkgray':215 'uicolor.gray':217 'uicolor.label':149,164 'uicolor.lightgray':219 'uicolor.opaqueseparator':182 'uicolor.placeholdertext':155 'uicolor.quaternarysystemfill':142 'uicolor.secondarylabel':151,166 'uicolor.secondarysystembackground':138 'uicolor.separator':177 'uicolor.separator.withalphacomponent':179 'uicolor.systembackground':136 'uicolor.systemblue':88,159,172,184,195 'uicolor.systemblue.withalphacomponent':96,99,102,105,108,111,114,117,120,123 'uicolor.systemgray':213 'uicolor.systemgray2':211 'uicolor.systemgray3':209 'uicolor.systemgray4':207 'uicolor.systemgray5':205 'uicolor.systemgray6':203 'uicolor.systemgreen':189 'uicolor.systemorange':191 'uicolor.systempink.withalphacomponent':1419,1429 'uicolor.systemred':193 'uicolor.tertiarylabel':153,168 'uicolor.tertiarysystembackground':140 'uicolor.white':157,170,1131,1164,1229,1308 'uifont':334,347 'uifont.systemfont':248,254,260,266,272,278,284,290,296,302,308 'uiimag':694,951,956,958,963,965,970,972,977 'uint64':1452 'use':61,313,362,502,506,524,703,988,994,997,1042,1506,1528,1555 'user':718 'valu':504,508 'var':1441,1450 'verifi':1520 'visual':30 'voic':819 'wcag':1550 'weight':251,257,263,269,275,281,287,293,299,305,311,344,357 'whatsapp':1195 'whatsapp-lik':1194 'white':760,1288,1343,1382 'whitespacesandnewlin':1445 'within':756 'without':1397 'withrenderingmod':954,961,968,975","prices":[{"id":"0b3ad178-c03d-474a-97e3-a3db62e21286","listingId":"081305b4-3f7d-4cb1-8fdc-d5779fef43c4","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T13:05:13.628Z"}],"sources":[{"listingId":"081305b4-3f7d-4cb1-8fdc-d5779fef43c4","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-ios-theming","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-ios-theming","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:13.628Z","lastSeenAt":"2026-05-18T19:04:53.634Z"}],"details":{"listingId":"081305b4-3f7d-4cb1-8fdc-d5779fef43c4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-ios-theming","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"ec9b38360a2b4b31ccf59e7f607eb3b8ee81f1fb","skill_md_path":"skills/cometchat-ios-theming/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-ios-theming"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-ios-theming","license":"MIT","description":"Customize the look and feel of CometChat iOS UI Kit — colors, fonts, styles, and dark mode support.","compatibility":"CometChatUIKitSwift ^5; iOS 13+"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-ios-theming"},"updatedAt":"2026-05-18T19:04:53.634Z"}}