{"id":"87fae4b6-294f-4c57-9c10-dc5e7fb7d5da","shortId":"vr4bAs","kind":"skill","title":"cometchat-android-v6-compose-theming","tagline":"CometChat Android UIKit v6 Jetpack Compose theming — CometChatTheme, CompositionLocal color schemes, typography, shapes, and dark mode","description":"> **Companion skills:** cometchat-android-v6-kotlin-theming (Views equivalent), cometchat-android-v6-compose-components, cometchat-android-v6-compose-customization\n\n## Purpose\n\nApply and customize the CometChat theme in Jetpack Compose — color schemes, typography, shapes, dark mode, and per-component style overrides using the `CompositionLocal`-based theme system.\n\n## Use this skill when\n\n- Wrapping CometChat components in `CometChatTheme {}`\n- Changing the primary color or color scheme\n- Implementing dark mode support\n- Customizing typography or shapes\n- Accessing theme tokens in custom composables\n\n## Do not use this skill when\n\n- Working with Kotlin Views theming (use `cometchat-android-v6-kotlin-theming`)\n- Customizing bubble rendering (use `cometchat-android-v6-compose-customization`)\n\n## 1. CometChatTheme Wrapper\n\nAll CometChat Compose components must be wrapped in `CometChatTheme {}`:\n\n```kotlin\nimport com.cometchat.uikit.compose.theme.CometChatTheme\n\nsetContent {\n    CometChatTheme {\n        // CometChat components go here\n        CometChatConversations()\n    }\n}\n```\n\n`CometChatTheme` is a composable that provides theme values via `CompositionLocalProvider`:\n- `LocalColorScheme` → `CometChatColorScheme`\n- `LocalTypography` → `CometChatTypography`\n- `LocalShapes` → `Shapes`\n\n## 2. Color Scheme\n\n### 2.1 Default Light/Dark Schemes\n\n```kotlin\nimport com.cometchat.uikit.compose.theme.*\n\n// Light mode (default)\nCometChatTheme(colorScheme = lightColorScheme()) {\n    // ...\n}\n\n// Dark mode\nCometChatTheme(colorScheme = darkColorScheme()) {\n    // ...\n}\n\n// Auto based on system setting\nCometChatTheme(\n    colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()\n) {\n    // ...\n}\n```\n\n### 2.2 Custom Primary Color\n\n```kotlin\nCometChatTheme(\n    colorScheme = lightColorScheme(primary = Color(0xFF6851D6))\n) {\n    // All extended primary colors (50-900) auto-generate from the primary\n}\n```\n\n### 2.3 CometChatColorScheme Token Reference\n\nThe `CometChatColorScheme` class contains these token groups:\n\n**Primary Colors:**\n- `primary` — Main brand color\n\n**Extended Primary (auto-generated from primary):**\n- `extendedPrimaryColor50` through `extendedPrimaryColor900` — 10 shades blended with white (light) or black (dark)\n\n**Neutral Colors:**\n- `neutralColor50` through `neutralColor900` — 10 neutral shades\n\n**Alert Colors:**\n- `infoColor`, `successColor`, `warningColor`, `errorColor`, `messageReadColor`\n\n**Background Colors:**\n- `backgroundColor1` (lightest) through `backgroundColor4` (darkest)\n\n**Stroke/Border Colors:**\n- `strokeColorDefault`, `strokeColorLight`, `strokeColorDark`, `strokeColorHighlight`\n- Aliases: `borderColorLight`, `borderColorDefault`, `borderColorDark`, `borderColorHighlight`\n\n**Text Colors:**\n- `textColorPrimary`, `textColorSecondary`, `textColorTertiary`, `textColorDisabled`, `textColorWhite`, `textColorHighlight`\n\n**Icon Tint Colors:**\n- `iconTintPrimary`, `iconTintSecondary`, `iconTintTertiary`, `iconTintWhite`, `iconTintHighlight`\n\n**Button Colors:**\n- `primaryButtonBackgroundColor`, `primaryButtonIconTint`, `primaryButtonTextColor`\n- `secondaryButtonBackgroundColor`, `secondaryButtonIconTint`, `secondaryButtonTextColor`\n- `linkButtonColor`, `fabButtonBackgroundColor`, `fabButtonIconTint`, `whiteButtonPressed`\n\n**Static Colors:**\n- `colorWhite`, `colorBlack`\n\n### 2.4 Fully Custom Color Scheme\n\n```kotlin\nval customScheme = lightColorScheme(\n    primary = Color(0xFF6851D6),\n    neutralColor50 = Color(0xFFFAFAFA),\n    neutralColor900 = Color(0xFF141414),\n    errorColor = Color(0xFFFF3B30),\n    successColor = Color(0xFF34C759),\n    // ... override any token\n)\n\nCometChatTheme(colorScheme = customScheme) {\n    // ...\n}\n```\n\n## 3. Typography\n\n```kotlin\n// Access typography in composables\nval style: TextStyle = CometChatTheme.typography.heading1Bold\nval bodyStyle: TextStyle = CometChatTheme.typography.bodyRegular\nval titleStyle: TextStyle = CometChatTheme.typography.titleRegular\n```\n\nCustom typography:\n\n```kotlin\nCometChatTheme(\n    typography = CometChatTypography(/* custom TextStyles */)\n) {\n    // ...\n}\n```\n\n## 4. Shapes\n\n```kotlin\n// Access shapes\nval shapes: Shapes = CometChatTheme.shapes\n\n// Custom shapes\nCometChatTheme(\n    shapes = Shapes(/* custom corner radii */)\n) {\n    // ...\n}\n```\n\n## 5. Accessing Theme in Custom Composables\n\n```kotlin\n@Composable\nfun MyCustomView() {\n    val colors = CometChatTheme.colorScheme\n    val typography = CometChatTheme.typography\n\n    Text(\n        text = \"Hello\",\n        color = colors.textColorPrimary,\n        style = typography.bodyRegular\n    )\n\n    Box(\n        modifier = Modifier.background(colors.backgroundColor1)\n    )\n}\n```\n\n## 6. Extended Primary Color Generation\n\nExtended primary colors are auto-generated by blending the primary color with white (light mode) or black (dark mode):\n\n```kotlin\n// Light mode: primary blended with white at various percentages\n// extendedPrimaryColor50 = blend(primary, white, 0.96)  // lightest\n// extendedPrimaryColor500 = blend(primary, white, 0.44) // mid\n// extendedPrimaryColor900 = blend(primary, black, 0.08) // darkest\n\n// Dark mode: primary blended with black at various percentages\n// extendedPrimaryColor50 = blend(primary, black, 0.80)  // lightest\n// extendedPrimaryColor900 = blend(primary, white, 0.11) // lightest in dark\n```\n\nYou can override individual extended colors:\n\n```kotlin\nlightColorScheme(\n    primary = Color(0xFF6851D6),\n    extendedPrimaryColor500 = Color(0xFF9B8AE0) // manual override\n)\n```\n\n## Hard rules\n\n- ALWAYS wrap CometChat Compose components in `CometChatTheme {}` — components will crash or look wrong without it\n- NEVER use Material `MaterialTheme` tokens inside CometChat components — use `CometChatTheme.colorScheme` / `.typography` / `.shapes`\n- `CometChatTheme` does NOT extend `MaterialTheme` — they are separate theme systems\n- When overriding just the primary color, extended primary colors auto-regenerate — you don't need to set all 10 shades\n- `lightColorScheme()` and `darkColorScheme()` are factory functions, not data class constructors — use named parameters to override specific tokens","tags":["cometchat","android","compose","theming","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs"],"capabilities":["skill","source-cometchat","skill-cometchat-android-v6-compose-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-v6-compose-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,142 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:46.246Z","embedding":null,"createdAt":"2026-05-07T13:05:05.403Z","updatedAt":"2026-05-18T19:04:46.246Z","lastSeenAt":"2026-05-18T19:04:46.246Z","tsv":"'-900':218 '0.08':479 '0.11':500 '0.44':473 '0.80':494 '0.96':467 '0xff141414':343 '0xff34c759':349 '0xff6851d6':212,337,514 '0xff9b8ae0':517 '0xfffafafa':340 '0xffff3b30':346 '1':131 '10':252,266,578 '2':169 '2.1':172 '2.2':202 '2.3':225 '2.4':326 '3':356 '4':384 '5':401 '50':217 '6':428 'access':97,359,387,402 'alert':269 'alias':289 'alway':522 'android':3,8,27,35,41,117,127 'appli':46 'auto':190,220,245,438,569 'auto-gener':219,244,437 'auto-regener':568 'background':276 'backgroundcolor1':278 'backgroundcolor4':281 'base':70,191 'black':259,450,478,486,493 'blend':254,441,457,464,470,476,484,491,497 'bodystyl':369 'bordercolordark':292 'bordercolordefault':291 'bordercolorhighlight':293 'bordercolorlight':290 'box':424 'brand':240 'bubbl':122 'button':310 'chang':82 'class':231,588 'color':16,55,85,87,170,205,211,216,237,241,262,270,277,284,295,304,311,323,329,336,339,342,345,348,412,420,431,435,444,509,513,516,564,567 'colorblack':325 'colors.backgroundcolor1':427 'colors.textcolorprimary':421 'colorschem':183,188,196,208,354 'colorwhit':324 'com.cometchat.uikit.compose.theme':178 'com.cometchat.uikit.compose.theme.cometchattheme':145 'cometchat':2,7,26,34,40,50,78,116,126,135,148,524,543 'cometchat-android-v6-compose-components':33 'cometchat-android-v6-compose-customization':39,125 'cometchat-android-v6-compose-theming':1 'cometchat-android-v6-kotlin-theming':25,115 'cometchatcolorschem':164,226,230 'cometchatconvers':152 'cometchatthem':14,81,132,142,147,153,182,187,195,207,353,379,395,528,549 'cometchattheme.colorscheme':413,546 'cometchattheme.shapes':392 'cometchattheme.typography':366,416 'cometchattheme.typography.bodyregular':371 'cometchattheme.typography.titleregular':375 'cometchattypographi':166,381 'companion':23 'compon':38,64,79,137,149,526,529,544 'compos':5,12,37,43,54,102,129,136,156,362,406,408,525 'compositionloc':15,69 'compositionlocalprovid':162 'constructor':589 'contain':232 'corner':399 'crash':531 'custom':44,48,93,101,121,130,203,328,376,382,393,398,405 'customschem':333,355 'dark':21,59,90,185,260,451,481,503 'darkcolorschem':189,199,582 'darkest':282,480 'data':587 'default':173,181 'els':200 'equival':32 'errorcolor':274,344 'extend':214,242,429,433,508,552,565 'extendedprimarycolor50':249,463,490 'extendedprimarycolor500':469,515 'extendedprimarycolor900':251,475,496 'fabbuttonbackgroundcolor':319 'fabbuttonicontint':320 'factori':584 'fulli':327 'fun':409 'function':585 'generat':221,246,432,439 'go':150 'group':235 'hard':520 'heading1bold':367 'hello':419 'icon':302 'icontinthighlight':309 'icontintprimari':305 'icontintsecondari':306 'icontinttertiari':307 'icontintwhit':308 'implement':89 'import':144,177 'individu':507 'infocolor':271 'insid':542 'issystemindarkthem':198 'jetpack':11,53 'kotlin':29,111,119,143,176,206,331,358,378,386,407,453,510 'light':179,257,447,454 'light/dark':174 'lightcolorschem':184,201,209,334,511,580 'lightest':279,468,495,501 'linkbuttoncolor':318 'localcolorschem':163 'localshap':167 'localtypographi':165 'look':533 'main':239 'manual':518 'materi':539 'materialthem':540,553 'messagereadcolor':275 'mid':474 'mode':22,60,91,180,186,448,452,455,482 'modifi':425 'modifier.background':426 'must':138 'mycustomview':410 'name':591 'need':574 'neutral':261,267 'neutralcolor50':263,338 'neutralcolor900':265,341 'never':537 'overrid':66,350,506,519,560,594 'paramet':592 'per':63 'per-compon':62 'percentag':462,489 'primari':84,204,210,215,224,236,238,243,248,335,430,434,443,456,465,471,477,483,492,498,512,563,566 'primarybuttonbackgroundcolor':312 'primarybuttonicontint':313 'primarybuttontextcolor':314 'provid':158 'purpos':45 'radii':400 'refer':228 'regener':570 'render':123 'rule':521 'scheme':17,56,88,171,175,330 'secondarybuttonbackgroundcolor':315 'secondarybuttonicontint':316 'secondarybuttontextcolor':317 'separ':556 'set':194,576 'setcont':146 'shade':253,268,579 'shape':19,58,96,168,385,388,390,391,394,396,397,548 'skill':24,75,107 'skill-cometchat-android-v6-compose-theming' 'source-cometchat' 'specif':595 'static':322 'stroke/border':283 'strokecolordark':287 'strokecolordefault':285 'strokecolorhighlight':288 'strokecolorlight':286 'style':65,364,422 'successcolor':272,347 'support':92 'system':72,193,558 'text':294,417,418 'textcolordis':299 'textcolorhighlight':301 'textcolorprimari':296 'textcolorsecondari':297 'textcolortertiari':298 'textcolorwhit':300 'textstyl':365,370,374,383 'theme':6,13,30,51,71,98,113,120,159,403,557 'tint':303 'titlestyl':373 'token':99,227,234,352,541,596 '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' 'typographi':18,57,94,357,360,377,380,415,547 'typography.bodyregular':423 'uikit':9 'use':67,73,105,114,124,538,545,590 'v6':4,10,28,36,42,118,128 'val':332,363,368,372,389,411,414 'valu':160 'various':461,488 'via':161 'view':31,112 'warningcolor':273 'white':256,446,459,466,472,499 'whitebuttonpress':321 'without':535 'work':109 'wrap':77,140,523 'wrapper':133 'wrong':534","prices":[{"id":"4795ef21-9bf8-4c1a-b44a-748d0e1df7cd","listingId":"87fae4b6-294f-4c57-9c10-dc5e7fb7d5da","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:05.403Z"}],"sources":[{"listingId":"87fae4b6-294f-4c57-9c10-dc5e7fb7d5da","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-android-v6-compose-theming","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v6-compose-theming","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:05.403Z","lastSeenAt":"2026-05-18T19:04:46.246Z"}],"details":{"listingId":"87fae4b6-294f-4c57-9c10-dc5e7fb7d5da","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-android-v6-compose-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":"2c7f3b9fce4c108b228625959bb260fce573e10a","skill_md_path":"skills/cometchat-android-v6-compose-theming/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-android-v6-compose-theming"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-android-v6-compose-theming","license":"MIT","description":"CometChat Android UIKit v6 Jetpack Compose theming — CometChatTheme, CompositionLocal color schemes, typography, shapes, and dark mode","compatibility":"Android 9.0+ (API 28); Kotlin 1.9+; com.cometchat:chatuikit-compose-android:6.x"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-android-v6-compose-theming"},"updatedAt":"2026-05-18T19:04:46.246Z"}}