{"id":"f5acd597-113b-4e10-9142-0525af6de2f4","shortId":"74TzTk","kind":"skill","title":"cometchat-native-theming","tagline":"CometChatThemeProvider + CometChatI18nProvider — color tokens, typography, dark mode, per-component style overrides, and localization (18 built-in languages + custom translations). The JS theme object replaces CSS variables.","description":"## Purpose\n\nTeaches Claude how to theme and localize the React Native UI Kit via `CometChatThemeProvider` + `CometChatI18nProvider`. No CSS — React Native uses a JS theme object instead. This skill covers color tokens, typography, light/dark modes, per-component style overrides, the `useTheme()` hook for custom views, and localization (18 built-in languages, device auto-detect, custom translation overrides) via `useCometChatTranslation()`.\n\n**Read `cometchat-native-core` first** (the wrapper chain that includes `CometChatThemeProvider`) before this skill. `cometchat-native-components` § 13 covers per-component `style={}` overrides, which are a sibling concern to theming.\n\nGround truth: `docs/ui-kit/react-native/theme.mdx`, `colors.mdx`, `component-styling.mdx`, `message-bubble-styling.mdx`, and `packages/ChatUiKit/src/theme/type.ts` (the canonical type definitions).\n\n---\n\n## 1. How theming works (no CSS — JS theme object)\n\nReact Native has no CSS. Instead:\n\n```\nCometChatThemeProvider\n ↓ (provides theme via React Context)\nevery component reads theme via internal useTheme()\n ↓\ncomponent's default styles merge with theme overrides → rendered styles\n```\n\nThe theme object you pass has two top-level keys for light/dark variants:\n\n```tsx\n\n \n\n```\n\n### Style precedence (highest to lowest)\n\n1. **Component `style={}` prop** — wins always. Per-component tweak, overrides everything.\n2. **Custom theme** via `CometChatThemeProvider` — app-wide.\n3. **Default theme** — the UI Kit's built-in palette.\n\nSo for a one-off color on a single component, use `style={}`. For a brand-wide change (primary color everywhere), use the theme.\n\n### Deep merge\n\nTheme values are deeply merged with defaults — you only specify what you want to change:\n\n```tsx\ntheme={{\n light: {\n color: {\n primary: \"#F76808\", // override just primary; everything else keeps defaults\n },\n typography: {\n heading1: { fontWeight: \"700\" }, // override just heading1 weight\n },\n },\n}}\n```\n\n---\n\n## 2. The CometChatThemeProvider\n\n### Minimum setup — follow system light/dark\n\n```tsx\nimport { CometChatThemeProvider } from \"@cometchat/chat-uikit-react-native\";\n\n\n {/* children read the current system mode automatically */}\n\n```\n\n### Force a mode\n\n```tsx\n{/* ... */}\n{/* ... */}\n```\n\n### App-controlled theme toggle (wire to the project's existing theme system)\n\nIf the project already has a dark-mode toggle, wire `CometChatThemeProvider`'s `mode` prop to the same source. RN doesn't have CSS selectors — the React Native theme is just a value held somewhere in JS, and you forward that value to CometChat. Three common shapes:\n\n```tsx\n// Pattern A — OS-driven (no toggle yet, just react to system)\nimport { useColorScheme } from \"react-native\";\n\nfunction ThemedRoot({ children }: { children: React.ReactNode }) {\n const scheme = useColorScheme(); // \"light\" | \"dark\" | null\n return (\n \n {children}\n \n );\n}\n```\n\n```tsx\n// Pattern B — App-controlled toggle via custom Context\nconst ThemeContext = createContext<{ mode: \"light\" | \"dark\"; toggle: () => void }>({\n mode: \"light\",\n toggle: () => {},\n});\n\nfunction ThemedRoot({ children }: { children: React.ReactNode }) {\n const { mode } = useContext(ThemeContext);\n return (\n {children}\n );\n}\n```\n\n```tsx\n// Pattern C — react-native-paper (or any provider that exposes a theme)\nimport { useTheme } from \"react-native-paper\";\n\nfunction ThemedRoot({ children }: { children: React.ReactNode }) {\n const paperTheme = useTheme();\n return (\n \n {children}\n \n );\n}\n```\n\n**How to tell which pattern the project uses:**\n\n| Library / setup | Where the mode lives | Wire `theme={{ mode: ... }}` to |\n|---|---|---|\n| Plain RN, no toggle yet | `useColorScheme()` from `react-native` | `scheme === \"dark\" ? \"dark\" : \"light\"` |\n| Custom React Context | `useContext(ThemeContext).mode` (or whatever shape it has) | Read from the context |\n| `react-native-paper` | `useTheme().dark` | `dark ? \"dark\" : \"light\"` |\n| `restyle` | `useTheme().colors` (no built-in mode flag — track separately) | A sibling Context that holds the mode string |\n| `tamagui` | `useThemeName()` returns the current theme name | `name === \"dark\" ? \"dark\" : \"light\"` |\n| `Appearance.addChangeListener` (manual OS) | A `useState` that mirrors `Appearance.getColorScheme()` | Read from that state |\n\n**Rule:** wherever the project's theme toggle writes its current state, read from THAT and forward to `CometChatThemeProvider`'s `mode` prop. Don't keep two parallel sources of truth.\n\n**Don't** combine Pattern A with Pattern B unless the user explicitly wants \"follow OS until the user opens settings and overrides.\" That hybrid is legitimate but usually over-engineered for a first integration — ship Pattern B alone if the project has a toggle, Pattern A if it doesn't.\n\n### Placement in the wrapper chain\n\n`CometChatThemeProvider` is one of the four required wrappers — goes right above `CometChatProvider`, below `SafeAreaProvider` (see `cometchat-native-core` § 3):\n\n```tsx\n\n \n \n \n \n \n \n \n\n```\n\nWithout `CometChatThemeProvider`, components throw or fall back to minimal styles. Even if you don't customize anything, the wrapper is mandatory.\n\n---\n\n## 3. Color tokens\n\nEvery color is a hex string (`\"#F76808\"` — never `\"rgb(...)\"` or named colors).\n\n### Primary (brand accent)\n\n| Token | Controls |\n|---|---|\n| `primary` | Outgoing message bubbles, send button, active tabs, buttons |\n| `extendedPrimary50–900` | Auto-derived shades of primary. Used for hover, pressed, subtle accents. **Only override these if you need finer control** — the auto-derivation is usually correct. |\n\n### Neutrals (surfaces + borders)\n\n| Token | Default (light) | Controls |\n|---|---|---|\n| `neutral50` | `#FFFFFF` | White/light surface, background1 default |\n| `neutral100` | `#FAFAFA` | background2 default |\n| `neutral200` | `#F5F5F5` | background3 default |\n| `neutral300` | `#E8E8E8` | Incoming bubble default, borders |\n| `neutral400` | `#DCDCDC` | Divider lines |\n| `neutral500` | `#A1A1A1` | Placeholder / muted text, iconSecondary default |\n| `neutral600` | `#727272` | textSecondary (timestamps, subtitles) |\n| `neutral700` | `#5B5B5B` | Body text tier 3 |\n| `neutral800` | `#434343` | Headings default |\n| `neutral900` | `#141414` | textPrimary default, iconPrimary default |\n\n### Background aliases\n\n| Token | Maps to (default) | Controls |\n|---|---|---|\n| `background1` | `neutral50` | Main app background |\n| `background2` | `neutral100` | Sidebars, panels |\n| `background3` | `neutral200` | Nested panels, cards |\n| `background4` | `neutral300` | Additional surface |\n\n### Text\n\n| Token | Default | Controls |\n|---|---|---|\n| `textPrimary` | `neutral900` | Main body text |\n| `textSecondary` | `neutral600` | Timestamps, subtitles |\n| `textTertiary` | `neutral500` | Hints, placeholders |\n| `textHighlight` | `primary` | Links, mentions |\n\n### Icon\n\n| Token | Default | Controls |\n|---|---|---|\n| `iconPrimary` | `neutral900` | Active / default icons |\n| `iconSecondary` | `neutral500` | Inactive icons |\n| `iconHighlight` | `primary` | Action icons |\n\n### Semantic (state indicators)\n\n| Token | Default (light) | Controls |\n|---|---|---|\n| `info` | `#0B7BEA` | Info callouts, links |\n| `warning` | `#FFAB00` | Warning callouts |\n| `success` | `#09C26F` | Online indicator, success messages |\n| `error` | `#F44649` | Error messages, validation |\n\n### Bubble-specific\n\n| Token | Default | Controls |\n|---|---|---|\n| `sendBubbleBackground` | `primary` | Outgoing bubble bg |\n| `sendBubbleText` | `staticWhite` (`#FFFFFF`) | Outgoing bubble text |\n| `receiveBubbleBackground` | `neutral300` | Incoming bubble bg |\n| `receiveBubbleText` | `neutral900` | Incoming bubble text |\n\n### Static (never flip light/dark)\n\n| Token | Value | Controls |\n|---|---|---|\n| `staticBlack` | `#141414` | Fixed dark elements (overlays, opacity-based) |\n| `staticWhite` | `#FFFFFF` | Fixed light elements |\n\n---\n\n## 4. Mode: light / dark / system\n\n### Follow system\n\nDon't pass `mode` — the provider reads the OS setting via `useColorScheme()` and re-renders on change. The user gets automatic dark mode when they flip the system setting.\n\n```tsx\n{/* ... */}\n```\n\n### Force a specific mode\n\n```tsx\n{/* ... */}\n```\n\n### Toggle controlled by your app\n\nIf your app has its own dark-mode switch (stored in user prefs or Redux), drive `mode` from that state:\n\n```tsx\nconst [darkMode, setDarkMode] = useState(false);\n// ...\n\n \n \n\n```\n\nThe provider re-renders children and they pick up the new theme immediately.\n\n### Dark-mode palette\n\nOverride the `dark` branch of the theme for a custom dark palette:\n\n```tsx\n\n```\n\n---\n\n## 5. Typography overrides\n\nThe theme has a `typography` block with tokens per role:\n\n```tsx\n\n```\n\nCommon tokens: `heading1`, `heading2`, `heading3`, `heading4`, `body1`, `body2`, `caption1`, `caption2`, `button1`, `button2`. Each follows the RN `TextStyle` shape — `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing`.\n\n### Custom font setup\n\nReact Native font loading is NOT covered by the UI Kit — use your project's existing font system:\n\n- **Expo**: `useFonts()` from `expo-font`, load before rendering the provider\n- **Bare RN**: add fonts to `ios//Info.plist` `UIAppFonts` + `android/app/src/main/assets/fonts/` + run `npx react-native-asset`\n\nOnly reference a `fontFamily` in the theme once the font is actually loaded — otherwise iOS shows the system default and Android crashes.\n\n---\n\n## 6. Per-component style blocks\n\nBeyond color / typography, the theme has per-component style blocks for fine control. These sit inside the `light` / `dark` branches:\n\n```tsx\n\n```\n\nCommon component-style keys: `conversationStyles`, `usersStyles`, `groupsStyles`, `groupMembersStyles`, `messageHeaderStyles`, `messageListStyles`, `messageComposerStyles`, `threadHeaderStyles`, `callButtonsStyles`, `callLogsStyles`.\n\nEach block has the same nested shape as the component's `style` prop (see `cometchat-native-components` § 13).\n\n### Source of truth for available keys\n\nThe exact list of style keys per component is authoritative in the kit's type file:\n```\npackages/ChatUiKit/src/theme/type.ts\n```\n\nIf you're overriding a component style and the TypeScript compiler complains about an unknown key, check that file (or use `useTheme()` + autocomplete in your IDE).\n\n---\n\n## 7. Common recipes\n\n### Match a brand color (most common)\n\n```tsx\n\n \n\n```\n\nThis single line changes the outgoing message bubble color, send button color, active tab indicator, and every primary accent in the UI. The `extendedPrimary50–900` tints are auto-derived from `primary`.\n\n### Dark mode + custom brand\n\n```tsx\n\n \n\n```\n\n### Custom message-bubble colors\n\n```tsx\n\n```\n\nOverriding the bubble tokens directly is cleaner than doing it via `messageListStyles.sendBubbleStyle` — the tokens apply consistently everywhere bubbles render (main list + thread panel + search results).\n\n### Custom font across the whole UI\n\n1. Load font (Expo `useFonts` or bare `npx react-native-asset`)\n2. Override the typography block:\n\n```tsx\n\n```\n\n---\n\n## 8. Reading the theme in custom views\n\nWhen you write a custom slot view (e.g. a `TitleView` on `CometChatMessageHeader`) and want your custom component to match the theme, use the `useTheme()` hook:\n\n```tsx\nimport { useTheme } from \"@cometchat/chat-uikit-react-native\";\n\nfunction CustomTitle({ user }: any) {\n const theme = useTheme();\n return (\n \n {user.getName()}\n \n );\n}\n\n// Wire into a header:\n } />\n```\n\nThis is how you write custom views that automatically follow dark mode — by reading tokens from `useTheme()` instead of hardcoding colors.\n\n---\n\n## 9. Localization — `CometChatI18nProvider`\n\nTheming and localization are separate concerns but ship together. If your users aren't all English-speaking, wire `CometChatI18nProvider` alongside `CometChatThemeProvider`. Every string rendered by the UI Kit (message-action labels, empty states, system messages, alerts) flows through the i18n layer.\n\n### 9a. Built-in locales\n\nThe UI Kit ships translations for 18 languages out of the box:\n\n```\nde, en, es, fr, hi, hu, it, ja, ko, lt, ms, nl, pt, ru, sv, tr, zh, zh-tw\n```\n\n### 9b. Wrapper chain with i18n — five wrappers, not four\n\n`CometChatI18nProvider` goes above `CometChatThemeProvider` (theme is a child of i18n, not the other way around):\n\n```tsx\nimport { CometChatI18nProvider, CometChatThemeProvider } from \"@cometchat/chat-uikit-react-native\";\nimport { GestureHandlerRootView } from \"react-native-gesture-handler\";\nimport { SafeAreaProvider } from \"react-native-safe-area-context\";\n\n\n \n \n \n \n \n \n \n \n \n\n```\n\n### 9c. Auto-detect (default)\n\nWith no props, `CometChatI18nProvider` reads the device locale via `react-native-localize` and picks the matching language if available, falling back to English. No setup needed beyond the wrapper.\n\n**Install `react-native-localize`** (required peer dep for auto-detect):\n```bash\nnpx expo install react-native-localize # Expo managed\n# or\nnpm install react-native-localize && cd ios && pod install && cd .. # bare RN\n```\n\n### 9d. Force a specific language\n\nOverride the device default via `selectedLanguage`:\n\n```tsx\n\n```\n\nIf the user's app has its own language preference (stored in settings / Redux / MMKV), drive `selectedLanguage` from that state. The provider re-renders children on change so strings update immediately.\n\n### 9e. Fallback behavior\n\nChain: **`selectedLanguage` (if set + available) → device language (if `autoDetectLanguage=true`) → `fallbackLanguage` (default `'en'`)**.\n\n```tsx\n\n```\n\nIf the user's preferred language isn't bundled AND there's no custom translation for it, the provider logs a warning and uses the fallback.\n\n### 9f. Custom translations — override or add languages\n\nPass a `translations` object to override specific keys in an existing locale, or add a brand-new locale the UI Kit doesn't ship:\n\n```tsx\nconst translations = {\n en: {\n // Override a built-in English string\n \"NO_MESSAGES_YET\": \"Say hello to start the conversation!\",\n \"SENT\": \"Delivered\",\n },\n th: {\n // Add a new language — Thai\n \"NO_MESSAGES_YET\": \"ยังไม่มีข้อความ\",\n \"SENT\": \"ส่งแล้ว\",\n // ...provide the full key set\n },\n};\n\n\n```\n\nThe translation schema is a flat `{ KEY: \"string\" }` map. Keys are screaming-snake-case (`NO_MESSAGES_YET`, `MESSAGE_COMPOSER_MENTION_ALL`, `TRANSLATE`, etc.). Full key list lives at `packages/ChatUiKit/src/shared/resources/CometChatLocalizeNew/resources/en/translation.json` in the UI Kit source — grep for `\"KEY\":` there to find the exact key for a string you want to override.\n\n### 9g. Reading the language inside custom views\n\nWhen you write a custom slot view and need the current language (or want to translate your own strings using the same key set), use the `useCometChatTranslation` hook:\n\n```tsx\nimport { useCometChatTranslation } from \"@cometchat/chat-uikit-react-native\";\n\nfunction CustomEmptyState() {\n const { t, language } = useCometChatTranslation();\n return {t(\"NO_MESSAGES_YET\")};\n}\n```\n\nThe hook also exposes `availableLanguages` — useful for building a language-picker UI.\n\n### 9h. Common pitfall — i18n outside the provider\n\nCalling `useCometChatTranslation()` from a component rendered OUTSIDE `CometChatI18nProvider` (common when a custom view mounts at the navigator root instead of inside the chat subtree) logs `\"useCometChatTranslation used outside provider, using fallback translations\"` and falls through to English. Check your wrapper chain — i18n must wrap every component that reads translations, which is the whole app tree in practice.\n\n---\n\n## 10. Anti-patterns\n\n1. **Don't pass non-hex colors.** `\"rgb(...)\"`, `\"rgba(...)\"`, named colors, or `hsl(...)` will break the kit's internal color math (used to derive `extendedPrimary`). Use `\"#RRGGBB\"` or `\"#RRGGBBAA\"` (opacity via alpha).\n\n2. **Don't override `staticBlack` / `staticWhite`.** They're \"static\" for a reason — used in places where a specific absolute color is needed regardless of theme (overlays, badges on fixed-color avatars). Overriding them breaks visual consistency.\n\n3. **Don't override extended primary colors unless you need to.** `extendedPrimary50–900` are auto-derived from `primary`. Override them only if the auto-derivation doesn't match your brand's tints — and then override the full range, not just one level.\n\n4. **Don't wrap `CometChatThemeProvider` inside a screen.** It belongs at the app root, once. Re-wrapping per screen creates hydration-like flashes on navigation and breaks dark-mode switching.\n\n5. **Don't mix theme overrides and per-component `style={}` for the same property.** `style={}` wins — the theme override becomes dead code. Pick one: theme for app-wide, `style={}` for one-offs.\n\n6. **Don't reference an unloaded font in typography.** iOS silently falls back to system default; Android crashes. Gate the provider on font loading:\n\n ```tsx\n // Expo example\n const [fontsLoaded] = useFonts({ \"Inter-Bold\": require(\"./assets/Inter-Bold.ttf\") });\n if (!fontsLoaded) return null;\n return (\n \n \n \n );\n ```\n\n7. **Don't bypass the theme via `useColorScheme()` in a custom view.** Call `useTheme()` from `@cometchat/chat-uikit-react-native` — that gives you the current theme (including any overrides you set). `useColorScheme()` only gives you the raw system mode.\n\n---\n\n## 11. Verifying a theme change\n\nAfter changing the theme:\n\n1. Hard-reload the Metro bundler (not Fast Refresh — theme context sometimes doesn't update on Fast Refresh)\n2. Send a message — check the outgoing bubble color matches `primary` / `sendBubbleBackground`\n3. Toggle dark mode on the device (iOS: Settings → Display; Android: Settings → Display → Dark theme)\n4. Check that both modes render without reloading the app\n\nIf something looks unstyled or crashes:\n- Check the color is a hex string (not a name or rgb)\n- Check the font (if you overrode typography) is actually loaded\n- Check the override key matches the type in `packages/ChatUiKit/src/theme/type.ts`\n\n---\n\n## Skill routing reference\n\n| Skill | When to route |\n|---|---|\n| `cometchat-native-core` | Always read first — init/login/provider wrapper chain |\n| `cometchat-native-components` | For per-component `style={}` prop (sibling concern to theming) |\n| `cometchat-native-placement` | Where CometChat components go |\n| `cometchat-native-theming` | This skill — app-wide color/typography/dark mode |\n| `cometchat-native-customization` | Custom slot views + `useTheme()` in your own components |\n| `cometchat-native-expo-patterns` | Expo font loading via `expo-font` |\n| `cometchat-native-bare-patterns` | Bare RN font loading via `react-native-asset` |\n| `cometchat-native-troubleshooting` | Colors not applying, dark mode not switching, font shows system default |","tags":["cometchat","native","theming","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react"],"capabilities":["skill","source-cometchat","skill-cometchat-native-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-native-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 (23,524 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:55.099Z","embedding":null,"createdAt":"2026-05-07T13:05:15.460Z","updatedAt":"2026-05-18T19:04:55.099Z","lastSeenAt":"2026-05-18T19:04:55.099Z","tsv":"'/assets/inter-bold.ttf':2489 '/info.plist':1250 '09c26f':949 '0b0b0f':1139 '0b7bea':940 '1':139,218,722,1345,1545,1837,2273,2548 '10':2269 '11':2539 '12':1187 '13':113,1381 '141414':864,994,1339 '15':1180 '18':19,80,1323,1761 '1a1a1a':1495,1513 '2':230,312,1557,2306,2567 '20':1173 '28':1164 '3':238,717,752,858,2343,2579 '4':1007,2387,2594 '434343':860 '5':1140,2420 '5b5b5b':854 '6':1281,2455 '6852d6':1133 '7':1431,2504 '700':307,1166 '727272':849 '8':1327,1617 '9':1704 '900':782,1471,2355 '9a':1750 '9b':1787 '9c':1838 '9d':1909 '9e':1953 '9f':2014 '9g':2141 '9h':2205 'a1a1a1':842 'a594f3':1137 'absolut':2324 'accent':769,794,1465 'across':1541 'action':930,1738 'activ':778,921,1459 'actual':1270,2630 'add':1246,2019,2034,2069 'addit':892 'alert':1744 'alias':870 'alon':680 'alongsid':1727 'alpha':2305 'alreadi':360 'also':2194 'alway':223,2652 'android':1279,2471,2589 'android/app/src/main/assets/fonts':1252 'anti':2271 'anti-pattern':2270 'anyth':747 'app':236,345,447,879,1058,1061,1925,1975,2265,2399,2448,2603,2687 'app-control':344,446 'app-wid':235,2447,2686 'appearance.addchangelistener':601 'appearance.getcolorscheme':608 'appid':728 'appli':1528,2735 'area':1832 'aren':1719 'around':1810 'asset':1258,1556,2728 'authkey':730 'authorit':1397 'auto':87,784,805,1475,1840,1883,2358,2368 'auto-deriv':783,804,1474,2357,2367 'auto-detect':86,1839,1882 'autocomplet':1427 'autodetectlanguag':1964,1977 'automat':331,1035,1691 'avail':1386,1862,1960 'availablelanguag':2196 'avatar':2337 'b':445,649,679 'back':737,1864,1980,2467 'background':869,880 'background1':821,876,1138,1494 'background2':825,881 'background3':829,885 'background4':890 'backgroundcolor':1318,1329,1335,1342 'badg':2332 'bare':1244,1551,1907,2718,2720 'base':1001 'bash':1885 'becom':2440 'behavior':1955 'belong':2396 'beyond':1287,1870 'bg':969,980 'block':1148,1286,1297,1364,1561 'bodi':855,901 'body1':1174,1195,1587 'body2':1196,1592 'bold':1162,1571,2487,2503 'border':812,836 'bordertopcolor':1346 'bordertopwidth':1344 'box':1766 'branch':1118,1307 'brand':265,768,1436,1482,2037,2374 'brand-new':2036 'brand-wid':264 'break':2288,2340,2415 'bubbl':775,834,960,968,974,979,984,1454,1499,1516,1531,2574 'bubble-specif':959 'build':2199 'built':21,82,246,576,1752,2053 'built-in':20,81,245,575,1751,2052 'bundl':1996 'bundler':2554 'button':777,780,1457 'button1':1199,1607 'button2':1200,1612 'bypass':2507 'c':480 'call':2212,2516 'callbuttonsstyl':1361 'calllogsstyl':1362 'callout':942,947 'canon':136 'caption1':1181,1197,1597 'caption2':1198,1602 'card':889 'case':2104 'cd':1902,1906 'chain':102,697,1789,1956,2252,2657 'chang':267,290,1031,1450,1948,2543,2545 'chat':2234 'check':1421,2249,2571,2595,2610,2622,2632 'child':1803 'children':325,425,426,442,466,467,477,501,502,514,1102,1946 'claud':35 'cleaner':1520 'code':2442 'color':7,62,206,210,255,269,294,573,753,756,766,1131,1135,1288,1332,1338,1437,1444,1455,1458,1487,1491,1500,1505,1664,1703,2280,2284,2293,2325,2336,2349,2575,2612,2733 'color/typography/dark':2689 'colors.mdx':130 'combin':644 'cometchat':2,96,110,161,400,714,1378,2649,2659,2673,2677,2681,2692,2704,2716,2730 'cometchat-native-bare-pattern':2715 'cometchat-native-compon':109,1377,2658 'cometchat-native-cor':95,713,2648 'cometchat-native-custom':2691 'cometchat-native-expo-pattern':2703 'cometchat-native-plac':2672 'cometchat-native-them':1,2680 'cometchat-native-troubleshoot':2729 'cometchat/chat-uikit-react-native':324,1653,1816,2180,2519 'cometchati18nprovider':6,48,1706,1726,1796,1813,1846,1970,2085,2219 'cometchatmessagehead':1635,1675 'cometchatprovid':709,727 'cometchatthemeprovid':5,47,105,154,193,234,314,322,336,340,368,435,474,508,630,698,723,732,1050,1086,1128,1154,1309,1441,1484,1502,1563,1728,1799,1814,2391,2495 'common':402,1189,1348,1432,1439,2206,2220 'compil':1415 'complain':1416 'compon':14,69,112,117,162,168,219,226,259,733,1284,1295,1313,1350,1372,1380,1395,1410,1640,2216,2257,2429,2661,2665,2678,2702 'component-specif':1312 'component-styl':1349 'component-styling.mdx':131 'compos':2109 'concern':124,1712,2669 'consist':1529,2342 'const':428,453,469,504,1081,1658,2047,2183,2482 'containerstyl':1317,1325,1341 'context':159,452,549,561,584,1833,2559 'control':346,448,771,802,816,875,897,918,938,964,992,1055,1300 'convers':2065 'conversationstyl':1316,1353 'core':98,716,2651 'correct':809 'cover':61,114,1221 'crash':1280,2472,2609 'creat':2407 'createcontext':455 'css':31,50,144,152,380 'current':328,594,622,2158,2524 'custom':24,76,89,231,451,547,746,1124,1212,1481,1496,1539,1622,1628,1639,1688,2001,2015,2146,2152,2223,2514,2694,2695 'customemptyst':2182 'customtitl':1655,1680 'dark':10,198,209,343,364,432,439,440,458,512,544,545,567,568,569,598,599,996,1010,1036,1053,1066,1090,1112,1117,1125,1134,1306,1479,1490,1693,2417,2581,2592,2736 'dark-mod':363,1065,1111,2416 'darkmod':1082,1089,1094 'dcdcdc':838 'de':1767 'dead':2441 'deep':274 'deepli':279 'default':170,204,239,282,303,814,822,826,830,835,847,862,866,868,874,896,917,922,936,963,1277,1842,1917,1967,2470,2743 'definit':138 'deliv':2067 'dep':1880 'deriv':785,806,1476,2297,2359,2369 'detect':88,1841,1884 'devic':85,1849,1916,1961,1982,2585 'direct':1518 'display':2588,2591 'divid':839 'docs/ui-kit/react-native/theme.mdx':129 'doesn':377,691,2043,2370,2561 'drive':1075,1936 'driven':409 'e.g':1631 'e8e8e8':832,1347 'element':997,1006 'els':301 'empti':1740 'en':1768,1968,1985,2049 'engin':672 'english':1723,1866,2055,2248 'english-speak':1722 'error':954,956 'es':1769 'etc':1188,2113 'even':741 'everi':160,755,1463,1729,2256 'everyth':229,300 'everywher':270,1530 'exact':1389,2132 'exampl':2481 'exist':354,1230,2031 'explicit':653 'expo':1233,1237,1548,1887,1893,2480,2706,2708,2713 'expo-font':1236,2712 'expos':489,2195 'extend':2347 'extendedprimari':2298 'extendedprimary50':781,1470,2354 'f0f0f0':1511 'f44649':955 'f5f5f5':828,1336 'f76808':208,296,761,1330 'fafafa':824,1319 'fall':736,1863,1979,2245,2466 'fallback':1954,1987,2013,2242 'fallbacklanguag':1966,1984 'fals':1085 'fast':2556,2565 'ff6b35':1446,1489,1507 'ff8a3d':212 'ff8f66':1493 'ffab00':945 'fff':1343 'ffffff':818,972,1003,1333,1509 'file':1403,1423 'final':1986 'find':2130 'fine':1299 'finer':801 'first':99,675,2654 'five':1792 'fix':995,1004,2335 'fixed-color':2334 'flag':579 'flash':2411 'flat':2095 'flex':721,1836 'flip':988,1040 'flow':1745 'follow':317,655,1012,1202,1692 'font':1213,1217,1231,1238,1247,1268,1540,1547,2461,2477,2624,2709,2714,2722,2740 'fontfamili':1159,1168,1175,1182,1207,1262,1568,1573,1578,1583,1588,1593,1598,1603,1608,1613,1666,2500 'fontsiz':1163,1172,1179,1186,1208,1322,1668 'fontsload':2483,2491 'fontweight':306,1165,1209 'forc':332,1045,1910 'forward':396,628 'four':703,1795 'fr':1770 'full':2082,2114,2381 'function':423,464,499,1654,2181 'gate':2473 'gestur':1823 'gesturehandlerrootview':719,1818,1834 'get':1034 'give':2521,2533 'go':2679 'goe':706,1797 'grep':2125 'ground':127 'groupmembersstyl':1356 'groupsstyl':1355 'handler':1824 'hard':2550 'hard-reload':2549 'hardcod':1702 'head':861 'header':1674 'heading1':305,310,1158,1191,1567,2499 'heading2':1167,1192,1572 'heading3':1193,1577 'heading4':1194,1582 'held':390 'hello':2061 'hex':759,2279,2615 'hi':1771 'highest':215 'hint':909 'hold':586 'hook':74,1648,2175,2193 'hover':791 'hsl':2286 'hu':1772 'hybrid':665 'hydrat':2409 'hydration-lik':2408 'i18n':1748,1791,1805,2208,2253 'icon':915,923,927,931 'iconhighlight':928 'iconprimari':867,919 'iconsecondari':846,924 'ide':1430 'immedi':1110,1952 'import':321,417,492,1650,1812,1817,1825,2177 'inact':926 'includ':104,2526 'incom':833,978,983 'indic':934,951,1461 'info':939,941 'init/login/provider':2655 'insid':1303,2145,2232,2392 'instal':1873,1888,1897,1905 'instead':58,153,1700,2230 'integr':676 'inter':1161,1170,1177,1184,1570,1575,1580,1585,1590,1595,1600,1605,1610,1615,2486,2502 'inter-bold':1160,1569,2485,2501 'inter-medium':1584,1614 'inter-regular':1176,1183,1589,1594,1599,1604 'inter-semibold':1169,1574,1579,1609 'intern':166,2292 'io':1249,1273,1903,2464,2586 'isn':1994 'ja':1774 'js':27,55,145,393 'keep':302,636 'key':188,1352,1387,1393,1420,2028,2083,2096,2099,2115,2127,2133,2170,2635 'kit':45,243,1225,1400,1735,1757,2042,2123,2290 'ko':1775 'label':1739 'languag':23,84,1762,1860,1913,1929,1962,1983,1993,2020,2072,2144,2159,2185,2202 'language-pick':2201 'layer':1749 'legitim':667 'letterspac':1211 'level':187,2386 'librari':523 'light':196,205,293,339,431,441,457,462,513,546,570,600,815,937,1005,1009,1091,1130,1156,1305,1311,1443,1486,1504,1565,2497 'light/dark':65,190,319,989 'like':2410 'line':840,1449 'lineheight':1210 'link':913,943 'list':1390,1534,2116 'live':528,2117 'load':1218,1239,1271,1546,2478,2631,2710,2723 'local':18,40,79,1705,1709,1754,1850,1855,1877,1892,1901,2032,2039 'log':2007,2236 'look':2606 'lowest':217 'lt':1776 'main':878,900,1533 'manag':1894 'mandatori':751 'manual':602 'map':872,2098 'match':1434,1642,1859,2372,2576,2636 'math':2294 'medium':1586,1616 'mention':914,2110 'merg':172,275,280 'messag':774,953,957,1453,1498,1737,1743,2058,2075,2106,2108,2190,2570 'message-act':1736 'message-bubbl':1497 'message-bubble-styling.mdx':132 'messagecomposerstyl':1340,1359 'messageheaderstyl':1320,1357 'messageliststyl':1324,1358 'messageliststyles.sendbubblestyle':1525 'metro':2553 'minim':739 'minimum':315 'mirror':607 'mix':2423 'mmkv':1935 'mode':11,66,195,330,334,338,342,365,370,437,456,461,470,476,510,527,531,552,578,588,632,1008,1017,1037,1048,1052,1067,1076,1088,1113,1480,1694,2418,2538,2582,2598,2690,2737 'mount':2225 'ms':1777 'must':2254 'mute':844 'name':596,597,765,2283,2619 'nativ':3,43,52,97,111,149,384,422,483,497,542,564,715,1216,1257,1379,1555,1822,1830,1854,1876,1891,1900,2650,2660,2674,2682,2693,2705,2717,2727,2731 'navig':2228,2413 'need':800,1869,2156,2327,2352 'nest':887,1368 'neutral':810 'neutral100':823,882 'neutral200':827,886 'neutral300':831,891,977 'neutral400':837 'neutral50':817,877 'neutral500':841,908,925 'neutral600':848,904 'neutral700':853 'neutral800':859 'neutral900':863,899,920,982 'never':762,987 'new':1108,2038,2071 'nl':1778 'non':2278 'non-hex':2277 'npm':1896 'npx':1254,1552,1886 'null':433,2493 'object':29,57,147,180,2024 'off':2454 'omit':200 'one':253,700,2385,2444,2453 'one-off':252,2452 'onlin':950 'onvaluechang':1095 'opac':1000,2303 'opacity-bas':999 'open':660 'os':203,408,603,656,1022 'os-default':202 'os-driven':407 'otherwis':1272 'outgo':773,967,973,1452,2573 'outsid':2209,2218,2239 'over-engin':670 'overlay':998,2331 'overrid':16,71,91,119,175,228,297,308,663,796,1115,1142,1315,1408,1514,1558,1914,2017,2026,2050,2140,2309,2338,2346,2362,2379,2425,2439,2528,2634 'overrod':2627 'packages/chatuikit/src/shared/resources/cometchatlocalizenew/resources/en/translation.json':2119 'packages/chatuikit/src/theme/type.ts':134,1404,2640 'pad':1326 'palett':248,1114,1126 'panel':884,888,1536 'paper':484,498,565 'paperthem':505 'papertheme.dark':511 'parallel':638 'pass':182,1016,2021,2276 'pattern':405,444,479,519,645,648,678,687,2272,2707,2719 'peer':1879 'per':13,68,116,225,1151,1283,1294,1394,2405,2428,2664 'per-compon':12,67,115,224,1282,1293,2427,2663 'pick':1105,1857,2443 'picker':2203 'pitfal':2207 'place':2320 'placehold':843,910 'placement':693,2675 'plain':533 'pod':1904 'practic':2268 'preced':214 'pref':1072 'prefer':1930,1992 'press':792 'primari':207,211,268,295,299,767,772,788,912,929,966,1132,1136,1445,1464,1478,1488,1492,2348,2361,2577 'project':352,359,521,616,683,1228 'prop':221,371,633,1375,1845,2667 'properti':2434 'provid':155,487,1019,1098,1243,1942,2006,2080,2211,2240,2475 'pt':1779 'purpos':33 'rang':2382 'raw':2536 're':1028,1100,1407,1944,2313,2403 're-rend':1027,1099,1943 're-wrap':2402 'react':42,51,148,158,383,414,421,482,496,541,548,563,1215,1256,1554,1821,1829,1853,1875,1890,1899,2726 'react-nat':420,540 'react-native-asset':1255,1553,2725 'react-native-gesture-handl':1820 'react-native-loc':1852,1874,1889,1898 'react-native-pap':481,495,562 'react-native-safe-area-context':1828 'react.reactnode':427,468,503 'read':94,163,326,558,609,624,1020,1618,1696,1847,2142,2259,2653 'reason':2317 'receivebubblebackground':976,1510 'receivebubblestyl':1334 'receivebubbletext':981,1512 'recip':1433 'redux':1074,1934 'refer':1260,2458,2643 'refresh':2557,2566 'regardless':2328 'region':729 'regular':1178,1185,1591,1596,1601,1606 'reload':2551,2601 'render':176,1029,1101,1241,1532,1731,1945,2217,2599 'replac':30 'requir':704,1878,2488 'restyl':571 'result':1538 'return':434,473,507,592,1661,2187,2492,2494 'rgb':763,2281,2621 'rgba':2282 'right':707 'rn':376,534,1204,1245,1908,2721 'role':1152 'root':2229,2400 'rout':2642,2647 'rrggbb':2300 'rrggbbaa':2302 'ru':1780 'rule':613 'run':1253 'safe':1831 'safeareaprovid':711,1826 'say':2060 'schema':2092 'scheme':429,438,543 'scream':2102 'screaming-snake-cas':2101 'screen':2394,2406 'search':1537 'see':712,1376 'selectedlanguag':1919,1937,1957,1971,2086 'selectedus':1677 'selector':381 'semant':932 'semibold':1171,1576,1581,1611 'send':776,1456,2568 'sendbubblebackground':965,1506,2578 'sendbubblestyl':1328 'sendbubbletext':970,1508 'sent':2066,2078 'separ':581,1711 'set':661,1023,1043,1933,1959,2084,2171,2530,2587,2590 'setdarkmod':1083,1096 'setup':316,524,1214,1868 'shade':786 'shape':403,555,1206,1369 'ship':677,1714,1758,2045 'show':1274,2741 'sibl':123,583,2668 'sidebar':883 'silent':2465 'singl':258,1448 'sit':1302 'skill':60,108,2641,2644,2685 'skill-cometchat-native-theming' 'slot':1629,2153,2696 'snake':2103 'someth':2605 'sometim':2560 'somewher':391 'sourc':375,639,1382,2124 'source-cometchat' 'speak':1724 'specif':961,1047,1314,1912,2027,2323 'specifi':285 'start':2063 'state':612,623,933,1079,1741,1940,1976 'static':986,2314 'staticblack':993,2310 'staticwhit':971,1002,2311 'store':1069,1931 'string':589,760,1730,1950,2056,2097,2136,2166,2616 'style':15,70,118,171,177,213,220,261,720,740,1285,1296,1351,1374,1392,1411,1663,1835,2430,2435,2450,2666 'subtitl':852,906 'subtl':793 'subtre':2235 'success':948,952 'surfac':811,820,893 'sv':1781 'switch':1068,1092,2419,2739 'system':318,329,356,416,1011,1013,1042,1232,1276,1742,2469,2537,2742 'tab':779,1460 'tamagui':590 'teach':34 'tell':517 'text':845,856,894,902,975,985,1662 'texthighlight':911 'textprimari':865,898 'textsecondari':850,903 'textstyl':1205,1331,1337 'texttertiari':907 'th':2068,2087 'thai':2073 'theme':4,28,38,56,126,141,146,156,164,174,179,194,232,240,273,276,292,337,341,347,355,385,436,475,491,509,530,595,618,724,726,1051,1087,1109,1121,1129,1144,1155,1265,1291,1310,1442,1485,1503,1564,1620,1644,1659,1707,1800,2330,2424,2438,2445,2496,2509,2525,2542,2547,2558,2593,2671,2683 'theme.color.textprimary':1665 'theme.typography.heading3.fontfamily':1667 'theme.typography.heading3.fontsize':1669 'themecontext':454,472,551 'themedroot':424,465,500 'thread':1535 'threadheaderstyl':1360 'three':401 'throw':734 'tier':857 'timestamp':851,905 'tint':1472,2376 'titlestyl':1321 'titleview':1633,1678 'togeth':1715 'toggl':348,366,411,449,459,463,536,619,686,1054,2580 'token':8,63,754,770,813,871,895,916,935,962,990,1150,1190,1517,1527,1697 'top':186 'top-level':185 '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' 'tr':1782 'track':580 'translat':25,90,1759,2002,2016,2023,2048,2088,2089,2091,2112,2163,2243,2260 'tree':2266 'troubleshoot':2732 'true':1965,1978 'truth':128,641,1384 'tsx':192,291,320,335,404,443,478,718,1044,1049,1080,1127,1153,1308,1440,1483,1501,1562,1649,1811,1920,1969,2046,2176,2479 'tw':1786 'tweak':227 'two':184,637 'type':137,1402,2638 'typescript':1414 'typographi':9,64,304,1141,1147,1157,1289,1560,1566,2463,2498,2628 'ui':44,242,1224,1468,1544,1734,1756,2041,2122,2204 'uiappfont':1251 'unknown':1419 'unless':650,2350 'unload':2460 'unstyl':2607 'updat':1951,2563 'use':53,260,271,522,789,1226,1425,1645,2011,2167,2172,2197,2238,2241,2295,2299,2318 'usecolorschem':418,430,538,1025,2511,2531 'usecometchattransl':93,2174,2178,2186,2213,2237 'usecontext':471,550 'usefont':1234,1549,2484 'user':652,659,1033,1071,1656,1676,1679,1681,1682,1718,1923,1990 'user.getname':1670 'user.preferredlanguage':1972 'usersstyl':1354 'usest':605,1084 'usethem':73,167,493,506,566,572,1426,1647,1651,1660,1699,2517,2698 'usethemenam':591 'usual':669,808 'valid':958 'valu':277,389,398,991,1093 'variabl':32 'variant':191 'verifi':2540 'via':46,92,157,165,233,450,1024,1524,1851,1918,2304,2510,2711,2724 'view':77,1623,1630,1689,2147,2154,2224,2515,2697 'visual':2341 'void':460 'want':288,654,1637,2138,2161 'warn':944,946,2009 'way':1809 'weight':311 'whatev':554 'wherev':614 'white/light':819 'whole':1543,2264 'wide':237,266,2449,2688 'win':222,2436 'wire':349,367,529,1671,1725 'without':731,2600 'work':142 'wrap':2255,2390,2404 'wrapper':101,696,705,749,1788,1793,1872,2251,2656 'write':620,1626,1687,2150 'yet':412,537,2059,2076,2107,2191 'zh':1783,1785 'zh-tw':1784 'ยังไม่มีข้อความ':2077 'ส่งแล้ว':2079","prices":[{"id":"a793a675-08ae-4a4d-a2ea-9a208878f07f","listingId":"f5acd597-113b-4e10-9142-0525af6de2f4","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:15.460Z"}],"sources":[{"listingId":"f5acd597-113b-4e10-9142-0525af6de2f4","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-native-theming","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-native-theming","isPrimary":false,"firstSeenAt":"2026-05-07T13:05:15.460Z","lastSeenAt":"2026-05-18T19:04:55.099Z"}],"details":{"listingId":"f5acd597-113b-4e10-9142-0525af6de2f4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-native-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":"5481c25b81e140839ae2aa8fbe7f8875fb96e60a","skill_md_path":"skills/cometchat-native-theming/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-native-theming"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-native-theming","license":"MIT","description":"CometChatThemeProvider + CometChatI18nProvider — color tokens, typography, dark mode, per-component style overrides, and localization (18 built-in languages + custom translations). The JS theme object replaces CSS variables.","compatibility":"Node.js >=18; React Native >=0.70; @cometchat/chat-uikit-react-native ^5"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-native-theming"},"updatedAt":"2026-05-18T19:04:55.099Z"}}