{"id":"01db0859-d354-4948-abf5-3b08d8153839","shortId":"NMKMkc","kind":"skill","title":"cometchat-flutter-v5-theming","tagline":"Use when customizing the visual appearance of CometChat Flutter UIKit v5 components. Triggers on CometChatThemeHelper, CometChatColorPalette, CometChatSpacing, CometChatTypography, Style classes, merge().","description":"# CometChat Flutter UIKit v5 — Theming & Styling\n\nHow to customize the visual appearance of all CometChat v5 components.\n\n## Theme System Architecture\n\nThree layers, resolved via Flutter's `ThemeExtension` system:\n\n1. `CometChatColorPalette` — colors (primary, neutral, alert, background, text, icon, button, border)\n2. `CometChatSpacing` — spacing, padding, margin, and radius tokens\n3. `CometChatTypography` — text styles (heading1-4, body, caption1-2, button, link, title)\n\nAccess via static helpers:\n```dart\nfinal colors = CometChatThemeHelper.getColorPalette(context);\nfinal spacing = CometChatThemeHelper.getSpacing(context);\nfinal typography = CometChatThemeHelper.getTypography(context);\n```\n\n**Important:** `getColorPalette()` creates a new object every call, resolving each token via `Theme.of(context)`. Cache in `didChangeDependencies()`, never call in `build()`.\n\n## Applying a Custom Theme\n\nRegister `CometChatColorPalette` as a `ThemeExtension` on your `ThemeData`:\n\n```dart\n// ✅ CORRECT\nMaterialApp(\n  theme: ThemeData(\n    extensions: [\n      CometChatColorPalette(\n        primary: const Color(0xFF6852D6),\n        textPrimary: const Color(0xFF141414),\n        textSecondary: const Color(0xFF727272),\n      ),\n    ],\n  ),\n  darkTheme: ThemeData(\n    extensions: [\n      CometChatColorPalette(\n        primary: const Color(0xFF604CC3),\n        textPrimary: const Color(0xFFFFFFFF),\n        textSecondary: const Color(0xFFA0A0A0),\n      ),\n    ],\n  ),\n)\n```\n\n## Dark Mode\n\n```dart\nCometChatThemeMode.mode = ThemeMode.dark;   // Force dark\nCometChatThemeMode.mode = ThemeMode.system;  // Follow system\n```\n\n## Commonly Used Color Tokens\n\n| Token | Description | Light Default | Dark Default |\n|-------|-------------|---------------|--------------|\n| `primary` | Brand color | `#6852D6` | `#604CC3` |\n| `background1`–`4` | Surface backgrounds | neutral50→neutral300 | neutral50→neutral300 |\n| `textPrimary` | Main text | neutral900 | neutral900 |\n| `textSecondary` | Secondary text | neutral600 | neutral600 |\n| `borderLight` | Subtle borders | neutral200 | neutral200 |\n| `iconPrimary` | Main icons | neutral900 | neutral900 |\n| `iconSecondary` | Secondary icons | neutral500 | neutral500 |\n| `iconHighlight` | Highlighted icons | primary | primary |\n| `error` | Error states | `#F44649` | `#C73C3E` |\n| `white` / `black` | Fixed (NOT brightness-aware) | `Colors.white` / `Colors.black` | Same |\n| `transparent` | Transparent | `Colors.transparent` | Same |\n| `neutral600` | Used for date styles | — | — |\n\nExtended primary shades (`extendedPrimary50`–`900`) are auto-generated from `primary`. Override individually if needed.\n\n## Commonly Used Spacing Tokens\n\n| Token | Default |\n|-------|---------|\n| `padding` / `spacing` / `radius` | 2 |\n| `padding1` / `spacing1` / `radius1` | 4 |\n| `padding2` / `spacing2` / `radius2` | 8 |\n| `padding3` / `spacing3` / `radius3` | 12 |\n| `padding4` / `spacing4` / `radius4` | 16 |\n| `padding5` / `spacing5` / `radius5` | 20 |\n| `padding6` / `spacing6` | 24 |\n| `radiusMax` / `spacingMax` | 1000 |\n\n## Typography Tokens\n\n`CometChatTypography` provides: `heading1`–`heading4`, `body`, `caption1`, `caption2`, `button`, `link`, `title`.\n\nEach has `.bold`, `.medium`, `.regular` variants:\n```dart\ntypography.body?.regular?.fontSize\ntypography.heading2?.bold?.fontWeight\ntypography.caption1?.regular?.fontFamily\n```\n\n## Theme Caching Pattern (from package source)\n\nAll UIKit components cache theme unconditionally in `didChangeDependencies()`:\n\n```dart\n// ✅ CORRECT — matches actual package pattern\n@override\nvoid didChangeDependencies() {\n  super.didChangeDependencies();\n  colorPalette = CometChatThemeHelper.getColorPalette(context);\n  spacing = CometChatThemeHelper.getSpacing(context);\n  typography = CometChatThemeHelper.getTypography(context);\n}\n```\n\nDo NOT use a `_themeInitialized` flag — it prevents theme updates on system theme changes.\n\n## Component Style Classes — merge() Pattern\n\nEvery component has a `CometChat{Component}Style` extending `ThemeExtension`. Resolved internally:\n\n```dart\n// Inside component's didChangeDependencies():\nstyle = CometChatThemeHelper.getTheme<CometChatConversationsStyle>(\n    context: context,\n    defaultTheme: CometChatConversationsStyle.of,\n).merge(widget.conversationsStyle);\n```\n\nPass overrides via constructor:\n```dart\nCometChatConversations(\n  conversationsStyle: CometChatConversationsStyle(\n    backgroundColor: Colors.black,\n  ),\n)\n```\n\n## Gotchas\n\n- `colorPalette.white` / `black` / `transparent` are NOT brightness-aware — use `neutral50` for brightness-aware white\n- Extended primary shades auto-generated from `primary` by blending with white (light) or black (dark)\n\n## Checklist — Theming\n\n- [ ] Colors from `CometChatThemeHelper.getColorPalette(context)`, never hardcoded\n- [ ] Theme cached in `didChangeDependencies()`, not `build()`\n- [ ] Custom theme registered as `ThemeExtension` on both `theme` and `darkTheme`\n- [ ] Component styles passed via constructor props","tags":["cometchat","flutter","theming","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-flutter-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-flutter-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 (4,981 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:50.578Z","embedding":null,"createdAt":"2026-05-07T13:05:10.058Z","updatedAt":"2026-05-18T19:04:50.578Z","lastSeenAt":"2026-05-18T19:04:50.578Z","tsv":"'-2':82 '-4':79 '0xff141414':150 '0xff604cc3':162 '0xff6852d6':146 '0xff727272':154 '0xffa0a0a0':170 '0xffffffff':166 '1':55 '1000':309 '12':295 '16':299 '2':66,283 '20':303 '24':306 '3':74 '4':198,287 '604cc3':196 '6852d6':195 '8':291 '900':263 'access':86 'actual':355 'alert':60 'appear':11,38 'appli':124 'architectur':46 'auto':266,444 'auto-gener':265,443 'awar':246,432,438 'background':61,200 'background1':197 'backgroundcolor':422 'black':241,426,454 'blend':449 'bodi':80,316 'bold':324,333 'border':65,217 'borderlight':215 'brand':193 'bright':245,431,437 'brightness-awar':244,430,436 'build':123,469 'button':64,83,319 'c73c3e':239 'cach':117,339,347,465 'call':110,121 'caption1':81,317 'caption2':318 'chang':384 'checklist':456 'class':25,387 'color':57,92,145,149,153,161,165,169,184,194,458 'colorpalett':362 'colorpalette.white':425 'colors.black':248,423 'colors.transparent':252 'colors.white':247 'cometchat':2,13,27,41,394 'cometchat-flutter-v5-theming':1 'cometchatcolorpalett':21,56,129,142,158 'cometchatconvers':419 'cometchatconversationsstyl':421 'cometchatconversationsstyle.of':411 'cometchatspac':22,67 'cometchatthemehelp':20 'cometchatthemehelper.getcolorpalette':93,363,460 'cometchatthemehelper.getspacing':97,366 'cometchatthemehelper.gettheme':407 'cometchatthemehelper.gettypography':101,369 'cometchatthememode.mode':174,178 'cometchattypographi':23,75,312 'common':182,274 'compon':17,43,346,385,391,395,403,480 'const':144,148,152,160,164,168 'constructor':417,484 'context':94,98,102,116,364,367,370,408,409,461 'conversationsstyl':420 'correct':137,353 'creat':105 'custom':8,35,126,470 'dark':171,177,190,455 'darkthem':155,479 'dart':90,136,173,328,352,401,418 'date':257 'default':189,191,279 'defaultthem':410 'descript':187 'didchangedepend':119,351,360,405,467 'error':235,236 'everi':109,390 'extend':259,397,440 'extendedprimary50':262 'extens':141,157 'f44649':238 'final':91,95,99 'fix':242 'flag':376 'flutter':3,14,28,51 'follow':180 'fontfamili':337 'fontsiz':331 'fontweight':334 'forc':176 'generat':267,445 'getcolorpalett':104 'gotcha':424 'hardcod':463 'heading1':78,314 'heading4':315 'helper':89 'highlight':231 'icon':63,222,227,232 'iconhighlight':230 'iconprimari':220 'iconsecondari':225 'import':103 'individu':271 'insid':402 'intern':400 'layer':48 'light':188,452 'link':84,320 'main':206,221 'margin':70 'match':354 'materialapp':138 'medium':325 'merg':26,388,412 'mode':172 'need':273 'neutral':59 'neutral200':218,219 'neutral300':202,204 'neutral50':201,203,434 'neutral500':228,229 'neutral600':213,214,254 'neutral900':208,209,223,224 'never':120,462 'new':107 'object':108 'overrid':270,358,415 'packag':342,356 'pad':69,280 'padding1':284 'padding2':288 'padding3':292 'padding4':296 'padding5':300 'padding6':304 'pass':414,482 'pattern':340,357,389 'prevent':378 'primari':58,143,159,192,233,234,260,269,441,447 'prop':485 'provid':313 'radius':72,282 'radius1':286 'radius2':290 'radius3':294 'radius4':298 'radius5':302 'radiusmax':307 'regist':128,472 'regular':326,330,336 'resolv':49,111,399 'secondari':211,226 'shade':261,442 'skill' 'skill-cometchat-flutter-v5-theming' 'sourc':343 'source-cometchat' 'space':68,96,276,281,365 'spacing1':285 'spacing2':289 'spacing3':293 'spacing4':297 'spacing5':301 'spacing6':305 'spacingmax':308 'state':237 'static':88 'style':24,32,77,258,386,396,406,481 'subtl':216 'super.didchangedependencies':361 'surfac':199 'system':45,54,181,382 'text':62,76,207,212 'textprimari':147,163,205 'textsecondari':151,167,210 'theme':5,31,44,127,139,338,348,379,383,457,464,471,477 'theme.of':115 'themedata':135,140,156 'themeextens':53,132,398,474 'themeiniti':375 'thememode.dark':175 'thememode.system':179 'three':47 'titl':85,321 'token':73,113,185,186,277,278,311 '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' 'transpar':250,251,427 'trigger':18 'typographi':100,310,368 'typography.body':329 'typography.caption1':335 'typography.heading2':332 'uikit':15,29,345 'uncondit':349 'updat':380 'use':6,183,255,275,373,433 'v5':4,16,30,42 'variant':327 'via':50,87,114,416,483 'visual':10,37 'void':359 'white':240,439,451 'widget.conversationsstyle':413","prices":[{"id":"76905627-890a-46c5-b814-b59578cd7642","listingId":"01db0859-d354-4948-abf5-3b08d8153839","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:10.058Z"}],"sources":[{"listingId":"01db0859-d354-4948-abf5-3b08d8153839","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-flutter-v5-theming","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v5-theming","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:10.058Z","lastSeenAt":"2026-05-18T19:04:50.578Z"}],"details":{"listingId":"01db0859-d354-4948-abf5-3b08d8153839","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-flutter-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":"2d94c2c63acb5e845cc09b14183e08c30affc375","skill_md_path":"skills/cometchat-flutter-v5-theming/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-flutter-v5-theming"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-flutter-v5-theming","license":"MIT","description":"Use when customizing the visual appearance of CometChat Flutter UIKit v5 components. Triggers on CometChatThemeHelper, CometChatColorPalette, CometChatSpacing, CometChatTypography, Style classes, merge().","compatibility":"cometchat_uikit_shared ^5.2.3; flutter >=2.5.0"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-flutter-v5-theming"},"updatedAt":"2026-05-18T19:04:50.578Z"}}