Override CometChat CSS custom properties for React chat UI theming.
npx skills add https://github.com/MAX5271/CometChat --skill cometchat-theming-max5271
Please help me install this Agent Skill. Skill: cometchat-theming Source: https://github.com/MAX5271/CometChat/tree/main/.claude/skills/cometchat-theming Command: npx skills add https://github.com/MAX5271/CometChat --skill cometchat-theming-max5271
CometChat UI may not visually match your app’s design system, so you need a reliable way to customize its look without breaking the already-integrated chat.
--cometchat-* custom properties (200+ tokens) via a CSS cascade placed after the UI kit variable import.prefers-color-scheme: dark) theming or app-driven theme toggles by targeting the same selector your app uses.Ask the assistant to “theme CometChat using the discord preset, including dark mode,” then apply the CSS override after the CometChat css-variables.css import in your app’s designated stylesheet.
High-intent search queries and answers about installing and using this skill.
Customize CometChat React UI colors by overriding `--cometchat-*` CSS custom properties in a stylesheet placed after the `@cometchat/chat-uikit-react/css-variables.css` import. This adjusts 200+ tokens for colors, typography, and radius to align the chat interface with your brand.
CometChat theming supports dark mode by targeting the same selector your app uses for OS-driven `prefers-color-scheme: dark` detection or app-controlled theme toggles. You apply CSS variable overrides to ensure dark mode alignment.
You can apply fast presets like slack, whatsapp, imessage, discord, or notion to your CometChat React chat interface. The assistant generates the necessary CSS variable overrides to quickly match those specific visual styles.
Place CometChat CSS variable overrides after the `css-variables.css` import in your framework-specific stylesheet location. For Astro, overrides must be placed inside the React island file to ensure the cascade applies correctly.
CometChat theme overrides may fail if using the v2 `cometchat apply-theme` method. You must avoid this and instead override `--cometchat-*` CSS custom properties placed after the UI kit variable import to ensure styles cascade correctly.
cometchatApply CSS variable overrides to theme CometChat UI across React, Next.js, Astro, and React Native.
angelriera-devCentralize Tailwind v4 and shadcn/ui theming with CSS variables and a ThemeProvider.
cometchatIntegrate CometChat UI Kit v6 into Astro projects using React islands.
sumrae412Enforce layered CSS architecture and design token standards for web applications.