{"id":"a966ccc1-30ee-4ac7-b8e2-e6021860fa41","shortId":"6mNsf4","kind":"skill","title":"cometchat-android-v5-theming","tagline":"Customize CometChat UI to match your app's design system. Covers CometChatTheme, XML attributes, style classes, dark mode, and color system.","description":"> **Companion skills:** `cometchat-android-v5-core` covers initialization;\n> `cometchat-android-v5-components` provides the component catalog;\n> `cometchat-android-v5-customization` covers deeper component-level overrides.\n\n## Purpose\n\nThis skill teaches how to theme CometChat Android UI Kit v5 to match your app's design system. CometChat uses a combination of XML theme attributes, the `CometChatTheme` static class, and per-component style resources.\n\n---\n\n## Use this skill when\n\n- Changing CometChat colors to match brand\n- Customizing fonts or typography\n- Enabling dark mode\n- Applying per-component styles\n- \"How do I change the primary color?\"\n- \"How do I make CometChat match my app theme?\"\n\n## Do not use this skill when\n\n- Writing custom message templates → use `cometchat-android-v5-customization`\n- Adding features → use `cometchat-android-v5-features`\n\n---\n\n## 1. How CometChat theming works\n\nCometChat's visual identity is driven by XML theme attributes defined in `attrs.xml` files. Every `CometChat*` component reads these attributes from the current theme. To override: define the attributes in your app's theme.\n\n### The CometChatTheme class\n\n`CometChatTheme` is a static utility class that provides programmatic access to theme colors. It reads from XML theme attributes and supports runtime overrides.\n\n**Key static methods:**\n\n| Method | Description |\n|---|---|\n| `setPrimaryColor(int)` | Override primary color at runtime |\n| `getPrimaryColor(Context)` | Get current primary color |\n| `getExtendedPrimaryColor50(Context)` through `getExtendedPrimaryColor900(Context)` | Get extended primary color shades (auto-generated from primary) |\n| `getBackgroundColor1(Context)` | Primary background color |\n| `getTextColorPrimary(Context)` | Primary text color |\n| `getTextColorSecondary(Context)` | Secondary text color |\n| `getIconTintHighlight(Context)` | Highlighted icon tint |\n| `getIconTintSecondary(Context)` | Secondary icon tint |\n\n### Setting primary color programmatically\n\n**Java:**\n```java\nCometChatTheme.setPrimaryColor(Color.parseColor(\"#6C63FF\"));\n```\n\n**Kotlin:**\n```kotlin\nCometChatTheme.setPrimaryColor(Color.parseColor(\"#6C63FF\"))\n```\n\nThis must be called before any CometChat component is inflated. The extended color shades (50–900) are auto-generated by blending the primary color with white (light mode) or black (dark mode).\n\n---\n\n## 2. XML theme attributes\n\nOverride CometChat colors in your app's `themes.xml`:\n\n```xml\n<style name=\"AppTheme\" parent=\"CometChatTheme.DayNight\">\n    <!-- CometChat primary color -->\n    <item name=\"cometchatPrimaryColor\">#6C63FF</item>\n\n    <!-- Background colors -->\n    <item name=\"cometchatBackgroundColor1\">#FFFFFF</item>\n    <item name=\"cometchatBackgroundColor2\">#F5F5F5</item>\n\n    <!-- Text colors -->\n    <item name=\"cometchatTextColorPrimary\">#141414</item>\n    <item name=\"cometchatTextColorSecondary\">#727272</item>\n\n    <!-- Extended primary shades (optional — auto-generated if not set) -->\n    <item name=\"cometchatExtendedPrimaryColor50\">#F0EEFF</item>\n    <item name=\"cometchatExtendedPrimaryColor100\">#D9D5FF</item>\n</style>\n```\n\n---\n\n## 3. Per-component styles\n\nEach component has its own style attribute that can be overridden in your theme. The naming convention is `cometchat<ComponentName>Style`.\n\n| Component | Style attribute | Example |\n|---|---|---|\n| `CometChatConversations` | `cometchatConversationsStyle` | `@style/CustomConversationsStyle` |\n| `CometChatMessageList` | `cometchatMessageListStyle` | `@style/CustomMessageListStyle` |\n| `CometChatMessageComposer` | `cometchatMessageComposerStyle` | `@style/CustomComposerStyle` |\n| `CometChatMessageHeader` | `cometchatMessageHeaderStyle` | `@style/CustomHeaderStyle` |\n| `CometChatUsers` | `cometchatUsersStyle` | `@style/CustomUsersStyle` |\n| `CometChatGroups` | `cometchatGroupsStyle` | `@style/CustomGroupsStyle` |\n| `CometChatAvatar` | `cometchatAvatarStyle` | `@style/CustomAvatarStyle` |\n| `CometChatBadge` | `cometchatBadgeStyle` | `@style/CustomBadgeStyle` |\n| `CometChatStatusIndicator` | `cometchatStatusIndicatorStyle` | `@style/CustomStatusStyle` |\n| `CometChatMessageReceipt` | `cometchatMessageReceiptStyle` | `@style/CustomReceiptStyle` |\n\n---\n\n## 4. Programmatic styling\n\nEvery component exposes setter methods for colors, text appearances, and drawables:\n\n**Java:**\n```java\nCometChatConversations conversations = findViewById(R.id.conversations);\nconversations.setBackgroundColor(Color.WHITE);\nconversations.setTitleTextColor(Color.BLACK);\nconversations.setTitleTextAppearance(R.style.MyTitleStyle);\nconversations.setSeparatorColor(Color.LTGRAY);\nconversations.setAvatarStyle(R.style.MyAvatarStyle);\nconversations.setStatusIndicatorStyle(R.style.MyStatusStyle);\n```\n\n---\n\n## 5. Dark mode\n\nCometChat respects Android's `DayNight` theme. Define separate values in `values-night/themes.xml`:\n\n```xml\n<!-- values/themes.xml (light) -->\n<style name=\"AppTheme\" parent=\"CometChatTheme.DayNight\">\n    <item name=\"cometchatPrimaryColor\">#6C63FF</item>\n    <item name=\"cometchatBackgroundColor1\">#FFFFFF</item>\n    <item name=\"cometchatTextColorPrimary\">#141414</item>\n</style>\n\n<!-- values-night/themes.xml (dark) -->\n<style name=\"AppTheme\" parent=\"CometChatTheme.DayNight\">\n    <item name=\"cometchatPrimaryColor\">#7B73FF</item>\n    <item name=\"cometchatBackgroundColor1\">#1A1A2E</item>\n    <item name=\"cometchatTextColorPrimary\">#E0E0E0</item>\n</style>\n```\n\nThe `CometChatTheme` class auto-detects the current night mode and adjusts extended color shades accordingly.\n\n---\n\n## Hard rules\n\n- **Set primary color BEFORE inflating components.** `CometChatTheme.setPrimaryColor()` must be called before `setContentView()` or component inflation.\n- **Use XML theme attributes for global overrides.** Per-component setters are for fine-tuning.\n- **Extended primary shades are auto-generated.** Only override them if you need exact brand colors at each shade level.\n- **Dark mode uses `values-night/`.** Follow Android's standard `DayNight` theme pattern.","tags":["cometchat","android","theming","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-android-v5-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-android-v5-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 (6,014 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:45.469Z","embedding":null,"createdAt":"2026-05-07T13:05:04.539Z","updatedAt":"2026-05-18T19:04:45.469Z","lastSeenAt":"2026-05-18T19:04:45.469Z","tsv":"'/themes.xml':445 '1':155 '2':325 '3':338 '4':397 '5':429 '50':306 '6c63ff':286,291 '900':307 'access':206 'accord':462 'ad':147 'adjust':458 'android':3,31,38,47,64,144,152,434,523 'app':12,71,129,191,334 'appear':408 'appli':110 'attribut':19,82,169,179,188,215,328,349,365,483 'attrs.xml':172 'auto':249,310,451,501 'auto-detect':450 'auto-gener':248,309,500 'background':256 'black':322 'blend':313 'brand':102,510 'call':295,474 'catalog':44 'chang':97,118 'class':21,86,196,202,449 'color':25,99,121,209,229,237,246,257,262,267,280,304,316,331,406,460,467,511 'color.black':420 'color.ltgray':424 'color.parsecolor':285,290 'color.white':418 'combin':78 'cometchat':2,7,30,37,46,63,75,98,126,143,151,157,160,175,298,330,361,432 'cometchat-android-v5-components':36 'cometchat-android-v5-core':29 'cometchat-android-v5-customization':45,142 'cometchat-android-v5-features':150 'cometchat-android-v5-theming':1 'cometchatavatar':385 'cometchatavatarstyl':386 'cometchatbadg':388 'cometchatbadgestyl':389 'cometchatconvers':367,413 'cometchatconversationsstyl':368 'cometchatgroup':382 'cometchatgroupsstyl':383 'cometchatmessagecompos':373 'cometchatmessagecomposerstyl':374 'cometchatmessagehead':376 'cometchatmessageheaderstyl':377 'cometchatmessagelist':370 'cometchatmessageliststyl':371 'cometchatmessagereceipt':394 'cometchatmessagereceiptstyl':395 'cometchatstatusind':391 'cometchatstatusindicatorstyl':392 'cometchatthem':17,84,195,197,448 'cometchattheme.setprimarycolor':284,289,471 'cometchatus':379 'cometchatusersstyl':380 'companion':27 'compon':40,43,53,90,113,176,299,341,344,363,401,470,478,489 'component-level':52 'context':233,239,242,254,259,264,269,274 'convent':359 'convers':414 'conversations.setavatarstyle':425 'conversations.setbackgroundcolor':417 'conversations.setseparatorcolor':423 'conversations.setstatusindicatorstyle':427 'conversations.settitletextappearance':421 'conversations.settitletextcolor':419 'core':33 'cover':16,34,50 'current':182,235,454 'custom':6,49,103,138,146 'dark':22,108,323,430,516 'daynight':436,526 'deeper':51 'defin':170,186,438 'descript':224 'design':14,73 'detect':452 'drawabl':410 'driven':165 'enabl':107 'everi':174,400 'exact':509 'exampl':366 'expos':402 'extend':244,303,459,496 'featur':148,154 'file':173 'findviewbyid':415 'fine':494 'fine-tun':493 'follow':522 'font':104 'generat':250,311,502 'get':234,243 'getbackgroundcolor1':253 'getextendedprimarycolor50':238 'getextendedprimarycolor900':241 'geticontinthighlight':268 'geticontintsecondari':273 'getprimarycolor':232 'gettextcolorprimari':258 'gettextcolorsecondari':263 'global':485 'hard':463 'highlight':270 'icon':271,276 'ident':163 'inflat':301,469,479 'initi':35 'int':226 'java':282,283,411,412 'key':220 'kit':66 'kotlin':287,288 'level':54,515 'light':319 'make':125 'match':10,69,101,127 'messag':139 'method':222,223,404 'mode':23,109,320,324,431,456,517 'must':293,472 'name':358 'need':508 'night':444,455,521 'overrid':55,185,219,227,329,486,504 'overridden':353 'pattern':528 'per':89,112,340,488 'per-compon':88,111,339,487 'primari':120,228,236,245,252,255,260,279,315,466,497 'programmat':205,281,398 'provid':41,204 'purpos':56 'r.id.conversations':416 'r.style.myavatarstyle':426 'r.style.mystatusstyle':428 'r.style.mytitlestyle':422 'read':177,211 'resourc':92 'respect':433 'rule':464 'runtim':218,231 'secondari':265,275 'separ':439 'set':278,465 'setcontentview':476 'setprimarycolor':225 'setter':403,490 'shade':247,305,461,498,514 'skill':28,58,95,135 'skill-cometchat-android-v5-theming' 'source-cometchat' 'standard':525 'static':85,200,221 'style':20,91,114,342,348,362,364,399 'style/customavatarstyle':387 'style/custombadgestyle':390 'style/customcomposerstyle':375 'style/customconversationsstyle':369 'style/customgroupsstyle':384 'style/customheaderstyle':378 'style/custommessageliststyle':372 'style/customreceiptstyle':396 'style/customstatusstyle':393 'style/customusersstyle':381 'support':217 'system':15,26,74 'teach':59 'templat':140 'text':261,266,407 'theme':5,62,81,130,158,168,183,193,208,214,327,356,437,482,527 'themes.xml':336 'tint':272,277 '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' 'tune':495 'typographi':106 'ui':8,65 'use':76,93,133,141,149,480,518 'util':201 'v5':4,32,39,48,67,145,153 'valu':440,443,520 'values-night':442,519 'visual':162 'white':318 'work':159 'write':137 'xml':18,80,167,213,326,337,446,481","prices":[{"id":"6806e8a2-976b-4014-8fdc-60ac5997d12f","listingId":"a966ccc1-30ee-4ac7-b8e2-e6021860fa41","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:04.539Z"}],"sources":[{"listingId":"a966ccc1-30ee-4ac7-b8e2-e6021860fa41","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-android-v5-theming","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v5-theming","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:04.539Z","lastSeenAt":"2026-05-18T19:04:45.469Z"}],"details":{"listingId":"a966ccc1-30ee-4ac7-b8e2-e6021860fa41","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-android-v5-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":"219eb3b192ef186ffeb250bb921c1e6f368dc0b8","skill_md_path":"skills/cometchat-android-v5-theming/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v5-theming"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-android-v5-theming","license":"MIT","description":"Customize CometChat UI to match your app's design system. Covers CometChatTheme, XML attributes, style classes, dark mode, and color system.","compatibility":"Android 7.0+; Java 8+; Kotlin 1.8+; com.cometchat:chat-uikit-android:5.x"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-android-v5-theming"},"updatedAt":"2026-05-18T19:04:45.469Z"}}