cometchat-react-v7-customization

Ground truth: @cometchat/chat-uikit-react@7. Theming mechanism below is from the live v7 theming docs (see core references/docs-map.md → /ui-kit/react/theming). Status: catalog-verified vs installed 7.1.0 (exports-only web-v7.json). Fetch the full --cometchat-* token list from the theming .md twin ({DOCS_BASE}/ui-kit/react/theming.md, via docs-map.md) — do NOT bake it.

Companion skills (read first)

• cometchat-react-v7-core — install, provider, init→login→render. This skill ASSUMES it.

Use this skill when

Branding/theming: colors, fonts, light/dark mode, or per-component style overrides.

Prerequisites & install

Covered by core. No new package.

Customization mechanism (BAKED — v7)

• Design tokens = CSS custom properties, all prefixed --cometchat-*, scoped to the .cometchat wrapper.
• Light/dark: built-in light (default) and dark, selected via the theme prop on CometChatProvider and the data-theme attribute on the wrapper. Runtime switching via the useTheme hook.
• Follow the OS theme: the theme prop is "light" | "dark" only and defaults to light — there is no theme="system" and the kit does NOT read prefers-color-scheme (AUDIT-004). To follow the system light/dark setting, sync the theme prop to window.matchMedia("(prefers-color-scheme: dark)") (with a change listener, SSR-guarded). Recommended as the default for a fresh integration. Full recipe: cometchat-react-v7-core/references/theming.md.
• Import order: import your overrides AFTER the UI Kit styles (import UI Kit CSS ONCE at root).