{"id":"ca5e4a99-ba88-45eb-8240-dd3d00576051","shortId":"ZWJ9WX","kind":"skill","title":"cometchat-angular-theming","tagline":"CometChatThemeService palette — color tokens, light/dark mode, typography, per-component style objects, and CSS variable overrides for the CometChat Angular UI Kit v4.","description":"## Purpose\n\nTeaches Claude how to theme the CometChat Angular UI Kit v4 via `CometChatThemeService` and per-component style objects. Covers palette tokens, light/dark mode switching, typography, per-component style classes, CSS variable overrides, and preset themes.\n\n**Read `cometchat-angular-core` first** — `CometChatThemeService` is injected in `AppComponent`'s constructor, which is covered there.\n\nGround truth: `docs/ui-kit/angular/theme`, `docs/ui-kit/angular/colors`, `docs/ui-kit/angular/component-styling`, and `@cometchat/chat-uikit-angular@4.x` style exports.\n\n---\n\n## 0. Preset themes (quickest start)\n\nFive built-in presets. Apply by setting these CSS variables in `src/styles.scss` after any existing imports:\n\n| Preset | `--cometchat-primary-color` | `--cometchat-font-family` | `--cometchat-background-color-01` | `--cometchat-text-color-primary` | Notes |\n|---|---|---|---|---|---|\n| `slack` | `#611f69` | `Lato, sans-serif` | `#ffffff` | `#1d1c1d` | |\n| `whatsapp` | `#25d366` | `'Segoe UI', Helvetica, sans-serif` | `#f0f2f5` | `#111b21` | |\n| `imessage` | `#007aff` | `-apple-system, 'SF Pro Text', sans-serif` | `#ffffff` | `#000000` | |\n| `discord` | `#5865f2` | `'gg sans', 'Noto Sans', Helvetica, sans-serif` | `#36393f` | `#dcddde` | Dark mode built-in |\n| `notion` | `#2eaadc` | `-apple-system, Helvetica, sans-serif` | `#ffffff` | `#37352f` | |\n\nExample — apply the Slack preset:\n\n```scss\n/* src/styles.scss — after existing imports */\n:root {\n  --cometchat-primary-color: #611f69;\n  --cometchat-font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --cometchat-background-color-01: #ffffff;\n  --cometchat-text-color-primary: #1d1c1d;\n}\n```\n\nAlso set the matching `CometChatThemeService` palette so the Angular DI layer stays in sync:\n\n```typescript\n// AppComponent constructor:\nthemeService.theme.palette.setPrimary({ light: \"#611f69\", dark: \"#611f69\" });\n```\n\n---\n\n## 1. How theming works in Angular\n\nThe Angular UI Kit uses two mechanisms for theming:\n\n1. **`CometChatThemeService`** — Angular DI service that controls the global palette (primary color, mode). Inject once in `AppComponent`.\n2. **Per-component style objects** — typed style classes (`ConversationsStyle`, `MessageListStyle`, etc.) passed as `[*Style]` inputs to individual components.\n\n```\nCometChatThemeService (global palette)\n  ↓\nevery <cometchat-*> component reads palette via the service\n  ↓\ncomponent's default styles merge with palette + per-component style overrides\n```\n\n### Style precedence (highest to lowest)\n\n1. **Per-component `[*Style]` input** — wins always. Per-component tweak.\n2. **`CometChatThemeService` palette** — app-wide primary color + mode.\n3. **Default theme** — the UI Kit's built-in palette.\n\n---\n\n## 2. CometChatThemeService — global palette\n\nInject in `AppComponent`'s constructor (not `ngOnInit` — the palette must be set before any component renders):\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { CometChatThemeService } from \"@cometchat/chat-uikit-angular\";\n\n@Component({ selector: \"app-root\", templateUrl: \"./app.component.html\" })\nexport class AppComponent {\n  constructor(private themeService: CometChatThemeService) {\n    // Set mode\n    themeService.theme.palette.setMode(\"light\");  // \"light\" | \"dark\"\n\n    // Set primary brand color (light + dark variants)\n    themeService.theme.palette.setPrimary({ light: \"#6851D6\", dark: \"#6851D6\" });\n\n    // Optional: set accent color\n    themeService.theme.palette.setAccent({ light: \"#F76808\", dark: \"#FF8A3D\" });\n  }\n}\n```\n\n### Dynamic mode switching\n\n```typescript\n@Component({ /* ... */ })\nexport class AppComponent {\n  constructor(private themeService: CometChatThemeService) {}\n\n  toggleDarkMode(isDark: boolean): void {\n    this.themeService.theme.palette.setMode(isDark ? \"dark\" : \"light\");\n  }\n}\n```\n\nThe palette change propagates to all rendered CometChat components immediately — no page reload needed.\n\n---\n\n## 3. Color tokens\n\n### Primary (brand accent)\n\n| Method | Controls |\n|---|---|\n| `setPrimary({ light, dark })` | Outgoing message bubbles, send button, active tabs, buttons |\n| `setAccent({ light, dark })` | Secondary accent — links, highlights |\n\nBoth methods take `{ light: \"#hex\", dark: \"#hex\" }`. Always provide both variants.\n\n### Mode\n\n| Mode | Effect |\n|---|---|\n| `\"light\"` | Light backgrounds, dark text |\n| `\"dark\"` | Dark backgrounds, light text |\n\n### Palette methods reference\n\n```typescript\nthemeService.theme.palette.setMode(\"light\" | \"dark\");\nthemeService.theme.palette.setPrimary({ light: \"#hex\", dark: \"#hex\" });\nthemeService.theme.palette.setAccent({ light: \"#hex\", dark: \"#hex\" });\nthemeService.theme.palette.setBackground({ light: \"#hex\", dark: \"#hex\" });\nthemeService.theme.palette.setSecondary({ light: \"#hex\", dark: \"#hex\" });\n```\n\n---\n\n## 4. Per-component style objects\n\nEach component accepts a typed style object. Import from `@cometchat/uikit-shared`:\n\n```typescript\nimport {\n  ConversationsStyle,\n  MessagesStyle,\n  MessageListStyle,\n  MessageComposerStyle,\n  MessageHeaderStyle,\n  UsersStyle,\n  GroupsStyle,\n  AvatarStyle,\n  BadgeStyle,\n  StatusIndicatorStyle,\n  ListItemStyle,\n  DateStyle,\n  BackdropStyle,\n  ConfirmDialogStyle,\n  LoaderStyle,\n} from \"@cometchat/uikit-shared\";\n```\n\n### ConversationsStyle\n\n```typescript\nconversationsStyle = new ConversationsStyle({\n  width: \"100%\",\n  height: \"100%\",\n  border: \"1px solid #e8e8e8\",\n  borderRadius: \"8px\",\n  background: \"#ffffff\",\n  titleTextFont: \"600 18px Inter, sans-serif\",\n  titleTextColor: \"#141414\",\n  lastMessageTextFont: \"400 14px Inter, sans-serif\",\n  lastMessageTextColor: \"#727272\",\n  typingIndictorTextColor: \"#6851D6\",\n  onlineStatusColor: \"#09C26F\",\n  privateGroupIconBackground: \"#F76808\",\n  passwordGroupIconBackground: \"#FFAB00\",\n});\n```\n\n```html\n<cometchat-conversations [conversationsStyle]=\"conversationsStyle\"></cometchat-conversations>\n```\n\n### MessageListStyle\n\n```typescript\nmessageListStyle = new MessageListStyle({\n  width: \"100%\",\n  height: \"100%\",\n  background: \"#fafafa\",\n  border: \"none\",\n  // Bubble colors\n  sendBubbleBackground: \"#6851D6\",\n  sendBubbleTextColor: \"#ffffff\",\n  sendBubbleTextFont: \"400 15px Inter, sans-serif\",\n  receiveBubbleBackground: \"#f0f0f0\",\n  receiveBubbleTextColor: \"#141414\",\n  receiveBubbleTextFont: \"400 15px Inter, sans-serif\",\n});\n```\n\n### MessageComposerStyle\n\n```typescript\nmessageComposerStyle = new MessageComposerStyle({\n  width: \"100%\",\n  background: \"#ffffff\",\n  border: \"1px solid #e8e8e8\",\n  borderRadius: \"0\",\n  inputBackground: \"#f5f5f5\",\n  inputBorder: \"none\",\n  inputBorderRadius: \"8px\",\n  textFont: \"400 15px Inter, sans-serif\",\n  textColor: \"#141414\",\n  placeHolderTextColor: \"#a1a1a1\",\n  sendIconTint: \"#6851D6\",\n  attachmentIconTint: \"#727272\",\n});\n```\n\n### AvatarStyle\n\n```typescript\navatarStyle = new AvatarStyle({\n  width: \"40px\",\n  height: \"40px\",\n  border: \"none\",\n  borderRadius: \"50%\",\n  backgroundColor: \"#6851D6\",\n  nameTextColor: \"#ffffff\",\n  nameTextFont: \"600 16px Inter, sans-serif\",\n  backgroundSize: \"cover\",\n});\n```\n\n### BadgeStyle\n\n```typescript\nbadgeStyle = new BadgeStyle({\n  background: \"#6851D6\",\n  textColor: \"#ffffff\",\n  textFont: \"600 11px Inter, sans-serif\",\n  border: \"none\",\n  borderRadius: \"10px\",\n  width: \"20px\",\n  height: \"20px\",\n});\n```\n\n---\n\n## 5. Common theming recipes\n\n### Match a brand color (most common)\n\n```typescript\n// In AppComponent constructor:\nthemeService.theme.palette.setPrimary({ light: \"#FF6B35\", dark: \"#FF8F66\" });\n```\n\nThis single call changes the outgoing message bubble color, send button, active tab indicator, and every primary accent in the UI.\n\n### Dark mode + custom brand\n\n```typescript\nthemeService.theme.palette.setMode(\"dark\");\nthemeService.theme.palette.setPrimary({ light: \"#6851D6\", dark: \"#A594F3\" });\nthemeService.theme.palette.setBackground({ light: \"#ffffff\", dark: \"#1a1a1a\" });\n```\n\n### Custom message bubble colors\n\n```typescript\nmessageListStyle = new MessageListStyle({\n  sendBubbleBackground: \"#FF6B35\",\n  sendBubbleTextColor: \"#ffffff\",\n  receiveBubbleBackground: \"#f0f0f0\",\n  receiveBubbleTextColor: \"#1a1a1a\",\n});\n```\n\n### Custom font across the whole UI\n\nThe Angular UI Kit reads font from CSS. Override via global styles:\n\n```css\n/* styles.css (global) */\n:root {\n  --cometchat-font-family: \"Inter\", sans-serif;\n}\n```\n\nOr pass `textFont` / `titleTextFont` in each component's style object.\n\n---\n\n## 6. CSS variable overrides\n\nThe Angular UI Kit exposes CSS custom properties for fine-grained control. Override in `styles.css` (global):\n\n```css\n/* styles.css */\n:root {\n  /* Primary color */\n  --cometchat-primary-color: #6851D6;\n\n  /* Background colors */\n  --cometchat-background-color-01: #ffffff;\n  --cometchat-background-color-02: #fafafa;\n  --cometchat-background-color-03: #f5f5f5;\n\n  /* Text colors */\n  --cometchat-text-color-primary: #141414;\n  --cometchat-text-color-secondary: #727272;\n  --cometchat-text-color-tertiary: #a1a1a1;\n\n  /* Border */\n  --cometchat-border-color-default: #e8e8e8;\n\n  /* Font */\n  --cometchat-font-family: \"Inter\", sans-serif;\n}\n```\n\nCSS variable overrides apply globally and take effect immediately. Use them for app-wide changes that the `CometChatThemeService` palette methods don't cover.\n\n---\n\n## 7. Anti-patterns\n\n1. **Do NOT call `themeService.theme.palette.setMode()` in `ngOnInit`.** Call it in the constructor — the palette must be set before any CometChat component renders. `ngOnInit` runs after the first change detection cycle, which may be too late.\n\n2. **Do NOT mix `CometChatThemeService` and per-component `[*Style]` for the same property.** The per-component style wins — the service override becomes dead code. Pick one: service for app-wide, `[*Style]` for one-offs.\n\n3. **Do NOT use non-hex colors in style objects.** Some style properties expect hex strings. `rgb()` / named colors / `hsl()` may not work in all style properties.\n\n4. **Do NOT wrap `CometChatThemeService` injection in a lazy-loaded module.** The service is a singleton — inject it at the root level (`AppComponent`) so the palette is set before any component renders.\n\n5. **Do NOT forget to provide both `light` and `dark` variants** when calling `setPrimary()` or `setAccent()`. Providing only one variant leaves the other as the default, which may not match your brand in dark mode.\n\n---\n\n## Skill routing reference\n\n| Skill | When to route |\n|---|---|\n| `cometchat-angular-core` | Init, login, module setup — always first |\n| `cometchat-angular-components` | Per-component `[*Style]` prop reference |\n| `cometchat-angular-placement` | Where to put chat |\n| `cometchat-angular-theming` | This skill — palette, dark mode, typography |\n| `cometchat-angular-customization` | Custom slot views, formatters |\n| `cometchat-angular-troubleshooting` | Colors not applying, dark mode not switching |","tags":["cometchat","angular","theming","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-angular-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-angular-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 (10,813 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:48.751Z","embedding":null,"createdAt":"2026-05-07T13:05:07.917Z","updatedAt":"2026-05-18T19:04:48.751Z","lastSeenAt":"2026-05-18T19:04:48.751Z","tsv":"'/app.component.html':405 '0':94,686 '000000':166 '007aff':155 '01':129,229,908 '02':914 '03':920 '09c26f':624 '1':259,274,338,986 '100':592,594,641,643,678 '10px':753 '111b21':153 '11px':745 '141414':611,664,701,929 '14px':614 '15px':656,667,695 '16px':727 '18px':605 '1a1a1a':814,830 '1d1c1d':143,236 '1px':596,682 '2':291,350,370,1021 '20px':755,757 '25d366':145 '2eaadc':185 '3':359,474,1059 '36393f':177 '37352f':194 '4':90,551,1087 '400':613,655,666,694 '40px':714,716 '5':758,1120 '50':720 '5865f2':168 '6':871 '600':604,726,744 '611f69':137,210,256,258 '6851d6':428,430,622,651,705,722,740,807,901 '7':982 '727272':620,707,935 '8px':600,692 'a1a1a1':703,941 'a594f3':809 'accent':433,479,497,794 'accept':559 'across':833 'activ':490,788 'also':237 'alway':345,507,1170 'angular':3,24,36,69,245,264,266,276,838,876,1164,1174,1184,1192,1202,1210 'angular/core':394 'anti':984 'anti-pattern':983 'app':354,402,971,1052 'app-root':401 'app-wid':353,970,1051 'appcompon':76,252,290,376,408,447,770,1110 'appl':157,187,217 'apple-system':156,186,216 'appli':104,196,961,1214 'attachmenticontint':706 'avatarstyl':576,708,710,712 'backdropstyl':581 'background':127,227,516,521,601,644,679,739,902,906,912,918 'backgroundcolor':721 'backgrounds':732 'badgestyl':577,734,736,738 'becom':1044 'blinkmacsystemfont':219 'boolean':454 'border':595,646,681,717,750,942,945 'borderradius':599,685,719,752 'brand':421,478,764,801,1151 'bubbl':487,648,784,817 'built':101,182,367 'built-in':100,181,366 'button':489,492,787 'call':779,989,993,1132 'chang':462,780,973,1013 'chat':1189 'class':59,299,407,446 'claud':30 'code':1046 'color':7,120,128,133,209,228,234,285,357,422,434,475,649,765,785,818,896,900,903,907,913,919,923,927,933,939,946,1066,1078,1212 'cometchat':2,23,35,68,118,122,126,131,207,212,226,232,314,467,631,854,898,905,911,917,925,931,937,944,951,1005,1163,1173,1183,1191,1201,1209 'cometchat-angular-compon':1172 'cometchat-angular-cor':67,1162 'cometchat-angular-custom':1200 'cometchat-angular-plac':1182 'cometchat-angular-them':1,1190 'cometchat-angular-troubleshoot':1208 'cometchat-background-color':125,225,904,910,916 'cometchat-border-color-default':943 'cometchat-convers':630 'cometchat-font-famili':121,211,853,950 'cometchat-primary-color':117,206,897 'cometchat-text-color-primari':130,231,924 'cometchat-text-color-secondari':930 'cometchat-text-color-tertiari':936 'cometchat/chat-uikit-angular':89,398 'cometchat/uikit-shared':566,585 'cometchatthemeservic':5,41,72,241,275,310,351,371,396,412,451,976,1025,1091 'common':759,767 'compon':14,45,57,294,309,315,321,330,341,348,388,392,399,444,468,554,558,867,1006,1029,1038,1118,1175,1178 'confirmdialogstyl':582 'constructor':78,253,378,409,448,771,997 'control':280,481,887 'convers':632 'conversationsstyl':300,569,586,588,590,633,634 'core':70,1165 'cover':48,81,733,981 'css':18,60,108,844,849,872,880,892,958 'custom':800,815,831,881,1203,1204 'cycl':1015 'dark':179,257,418,424,429,438,458,484,495,505,517,519,520,530,534,539,544,549,775,798,804,808,813,1129,1153,1197,1215 'datestyl':580 'dcddde':178 'dead':1045 'default':323,360,947,1145 'detect':1014 'di':246,277 'discord':167 'docs/ui-kit/angular/colors':86 'docs/ui-kit/angular/component-styling':87 'docs/ui-kit/angular/theme':85 'dynam':440 'e8e8e8':598,684,948 'effect':513,965 'etc':302 'everi':313,792 'exampl':195 'exist':114,203 'expect':1073 'export':93,406,445 'expos':879 'f0f0f0':662,828 'f0f2f5':152 'f5f5f5':688,921 'f76808':437,626 'fafafa':645,915 'famili':124,214,856,953 'ff6b35':774,824 'ff8a3d':439 'ff8f66':776 'ffab00':628 'ffffff':142,165,193,230,602,653,680,724,742,812,826,909 'fine':885 'fine-grain':884 'first':71,1012,1171 'five':99 'font':123,213,832,842,855,949,952 'forget':1123 'formatt':1207 'gg':169 'global':282,311,372,847,851,891,962 'grain':886 'ground':83 'groupsstyl':575 'height':593,642,715,756 'helvetica':148,173,189 'hex':504,506,533,535,538,540,543,545,548,550,1065,1074 'highest':335 'highlight':499 'hsl':1079 'html':629 'imessag':154 'immedi':469,966 'import':115,204,391,395,564,568 'indic':790 'individu':308 'init':1166 'inject':74,287,374,1092,1104 'input':306,343 'inputbackground':687 'inputbord':689 'inputborderradius':691 'inter':606,615,657,668,696,728,746,857,954 'isdark':453,457 'kit':26,38,268,364,840,878 'lastmessagetextcolor':619 'lastmessagetextfont':612 'late':1020 'lato':138,215 'layer':247 'lazi':1096 'lazy-load':1095 'leav':1140 'level':1109 'light':255,416,417,423,427,436,459,483,494,503,514,515,522,529,532,537,542,547,773,806,811,1127 'light/dark':9,51 'link':498 'listitemstyl':579 'load':1097 'loaderstyl':583 'login':1167 'lowest':337 'match':240,762,1149 'may':1017,1080,1147 'mechan':271 'merg':325 'messag':486,783,816 'messagecomposerstyl':572,672,674,676 'messageheaderstyl':573 'messageliststyl':301,571,635,637,639,820,822 'messagesstyl':570 'method':480,501,525,978 'mix':1024 'mode':10,52,180,286,358,414,441,511,512,799,1154,1198,1216 'modul':1098,1168 'must':383,1000 'name':1077 'nametextcolor':723 'nametextfont':725 'need':473 'new':589,638,675,711,737,821 'ngoninit':380,992,1008 'non':1064 'non-hex':1063 'none':647,690,718,751 'note':135 'notion':184 'noto':171 'object':16,47,296,556,563,870,1069 'off':1058 'one':1048,1057,1138 'one-off':1056 'onlinestatuscolor':623 'option':431 'outgo':485,782 'overrid':20,62,332,845,874,888,960,1043 'page':471 'palett':6,49,242,283,312,317,327,352,369,373,382,461,524,977,999,1113,1196 'pass':303,862 'passwordgroupiconbackground':627 'pattern':985 'per':13,44,56,293,329,340,347,553,1028,1037,1177 'per-compon':12,43,55,292,328,339,346,552,1027,1036,1176 'pick':1047 'placeholdertextcolor':702 'placement':1185 'preced':334 'preset':64,95,103,116,199 'primari':119,134,208,235,284,356,420,477,793,895,899,928 'privat':410,449 'privategroupiconbackground':625 'pro':160 'prop':1180 'propag':463 'properti':882,1034,1072,1086 'provid':508,1125,1136 'purpos':28 'put':1188 'quickest':97 'read':66,316,841 'receivebubblebackground':661,827 'receivebubbletextcolor':663,829 'receivebubbletextfont':665 'recip':761 'refer':526,1157,1181 'reload':472 'render':389,466,1007,1119 'rgb':1076 'root':205,403,852,894,1108 'rout':1156,1161 'run':1009 'san':140,150,163,170,172,175,191,223,608,617,659,670,698,730,748,859,956 'sans-serif':139,149,162,174,190,222,607,616,658,669,697,729,747,858,955 'scss':200 'secondari':496,934 'sego':146,220 'selector':400 'send':488,786 'sendbubblebackground':650,823 'sendbubbletextcolor':652,825 'sendbubbletextfont':654 'sendicontint':704 'serif':141,151,164,176,192,224,609,618,660,671,699,731,749,860,957 'servic':278,320,1042,1049,1100 'set':106,238,385,413,419,432,1002,1115 'setacc':493,1135 'setprimari':482,1133 'setup':1169 'sf':159 'singl':778 'singleton':1103 'skill':1155,1158,1195 'skill-cometchat-angular-theming' 'slack':136,198 'slot':1205 'solid':597,683 'source-cometchat' 'src/styles.scss':111,201 'start':98 'statusindicatorstyl':578 'stay':248 'string':1075 'style':15,46,58,92,295,298,305,324,331,333,342,555,562,848,869,1030,1039,1054,1068,1071,1085,1179 'styles.css':850,890,893 'switch':53,442,1218 'sync':250 'system':158,188,218 'tab':491,789 'take':502,964 'teach':29 'templateurl':404 'tertiari':940 'text':132,161,233,518,523,922,926,932,938 'textcolor':700,741 'textfont':693,743,863 'theme':4,33,65,96,261,273,361,760,1193 'themeservic':411,450 'themeservice.theme.palette.setaccent':435,536 'themeservice.theme.palette.setbackground':541,810 'themeservice.theme.palette.setmode':415,528,803,990 'themeservice.theme.palette.setprimary':254,426,531,772,805 'themeservice.theme.palette.setsecondary':546 'this.themeservice.theme.palette.setmode':456 'titletextcolor':610 'titletextfont':603,864 'toggledarkmod':452 'token':8,50,476 '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' 'troubleshoot':1211 'truth':84 'tweak':349 'two':270 'type':297,561 'typescript':251,390,443,527,567,587,636,673,709,735,768,802,819 'typingindictortextcolor':621 'typographi':11,54,1199 'ui':25,37,147,221,267,363,797,836,839,877 'use':269,967,1062 'usersstyl':574 'v4':27,39 'variabl':19,61,109,873,959 'variant':425,510,1130,1139 'via':40,318,846 'view':1206 'void':455 'whatsapp':144 'whole':835 'wide':355,972,1053 'width':591,640,677,713,754 'win':344,1040 'work':262,1082 'wrap':1090 'x':91","prices":[{"id":"270d0c2a-741a-4467-bc32-c0612ff3f487","listingId":"ca5e4a99-ba88-45eb-8240-dd3d00576051","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:07.917Z"}],"sources":[{"listingId":"ca5e4a99-ba88-45eb-8240-dd3d00576051","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-angular-theming","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-theming","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:07.917Z","lastSeenAt":"2026-05-18T19:04:48.751Z"}],"details":{"listingId":"ca5e4a99-ba88-45eb-8240-dd3d00576051","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-angular-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":"104eca0db6116cdee1ea0a6f507b0d87ab411d5b","skill_md_path":"skills/cometchat-angular-theming/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-angular-theming"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-angular-theming","license":"MIT","description":"CometChatThemeService palette — color tokens, light/dark mode, typography, per-component style objects, and CSS variable overrides for the CometChat Angular UI Kit v4.","compatibility":"Angular >=12 <=15; @cometchat/chat-uikit-angular ^4; @cometchat/chat-sdk-javascript ^4"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-angular-theming"},"updatedAt":"2026-05-18T19:04:48.751Z"}}