cometchat-angular-v5-customization

Ground truth: @cometchat/chat-uikit-angular@5 (5.1.0–5.2.0 verified). Theme tokens, ThemeService and the global config are FETCHED from {DOCS_BASE}/ui-kit/angular/customization/theming.md, /customization/global-config.md, /customization/localization.md, /customization/date-time-formatting.md and /message-bubble-styling.md — base + paths in cometchat-angular-v5-core/references/docs-map.md. CSS variable names are version-pinned; never invent a token.

Companion skills (read first)

• cometchat-angular-v5-core — install and references/theming.md for the token basics. Assumed.
• cometchat-angular-v5-components — view slots, when the change is structural rather than visual.

Use this skill when

Changing how the kit looks or reads: colours, fonts, dark mode, language, date formats, or replacing a region's markup.

Pick the smallest lever

Want	Use	Cost
Different colours / spacing	CSS variables	one stylesheet
Light ↔ dark	ThemeService	one line
Different language	CometChatLocalize	config
Different date format	per-component *DateTimeFormat inputs	one input
Different markup in a region	*View slot + ng-template	a template
Different behaviour	not customization — see features or components	—

Reach for the first that works. Replacing a whole region to change a colour throws away selection, presence and receipts.

CSS variables

Every visual is a --cometchat-* custom property. Override wherever it cascades — usually styles.css.

:root {
  --cometchat-primary-color: #6851D6;
  --cometchat-border-color-default: #DCDCDC;
  --cometchat-text-color-primary: #141414;
}

Scope to part of the app by setting them on a wrapper instead of :root. Full token list: {DOCS_BASE}/ui-kit/angular/customization/theming.md.

Never target generated class names with descendant selectors — they change between releases. Never use !important; if a token is not applying, the kit stylesheet is not registered (angular.json → styles) or your rule is not in the cascade path.