Cometchat Angular Theming

Purpose

Teaches 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.

Read `cometchat-angular-core` first — CometChatThemeService is injected in AppComponent's constructor, which is covered there.

Ground 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.

---

0. Preset themes (quickest start)

Five built-in presets. Apply by setting these CSS variables in src/styles.scss after any existing imports:

Example — apply the Slack preset:

/* src/styles.scss — after existing imports */
:root {
  --cometchat-primary-color: #611f69;
  --cometchat-font-family: Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cometchat-background-color-01: #ffffff;
  --cometchat-text-color-primary: #1d1c1d;
}

Also set the matching CometChatThemeService palette so the Angular DI layer stays in sync:

// AppComponent constructor:
themeService.theme.palette.setPrimary({ light: "#611f69", dark: "#611f69" });

---

1. How theming works in Angular

The Angular UI Kit uses two mechanisms for theming:

1. `CometChatThemeService` — Angular DI service that controls the global palette (primary color, mode). Inject once in AppComponent. 2. Per-component style objects — typed style classes (ConversationsStyle, MessageListStyle, etc.) passed as [*Style] inputs to individual components.

CometChatThemeService (global palette)
  ↓
every <cometchat-*> component reads palette via the service
  ↓
component's default styles merge with palette + per-component style overrides

Style precedence (highest to lowest)

1. *Per-component `[Style] input** — wins always. Per-component tweak. 2. **CometChatThemeService` palette — app-wide primary color + mode. 3. Default theme** — the UI Kit's built-in palette.

---

2. CometChatThemeService — global palette

Inject in AppComponent's constructor (not ngOnInit — the palette must be set before any component renders):

import { Component } from "@angular/core";
import { CometChatThemeService } from "@cometchat/chat-uikit-angular";

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent {
  constructor(private themeService: CometChatThemeService) {
    // Set mode
    themeService.theme.palette.setMode("light");  // "light" | "dark"

    // Set primary brand color (light + dark variants)
    themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#6851D6" });

    // Optional: set accent color
    themeService.theme.palette.setAccent({ light: "#F76808", dark: "#FF8A3D" });
  }
}

Dynamic mode switching

@Component({ /* ... */ })
export class AppComponent {
  constructor(private themeService: CometChatThemeService) {}

  toggleDarkMode(isDark: boolean): void {
    this.themeService.theme.palette.setMode(isDark ? "dark" : "light");
  }
}

The palette change propagates to all rendered CometChat components immediately — no page reload needed.

---

3. Color tokens

Primary (brand accent)

Both methods take { light: "#hex", dark: "#hex" }. Always provide both variants.

Mode

Palette methods reference

themeService.theme.palette.setMode("light" | "dark");
themeService.theme.palette.setPrimary({ light: "#hex", dark: "#hex" });
themeService.theme.palette.setAccent({ light: "#hex", dark: "#hex" });
themeService.theme.palette.setBackground({ light: "#hex", dark: "#hex" });
themeService.theme.palette.setSecondary({ light: "#hex", dark: "#hex" });

---

4. Per-component style objects

Each component accepts a typed style object. Import from @cometchat/uikit-shared:

import {
  ConversationsStyle,
  MessagesStyle,
  MessageListStyle,
  MessageComposerStyle,
  MessageHeaderStyle,
  UsersStyle,
  GroupsStyle,
  AvatarStyle,
  BadgeStyle,
  StatusIndicatorStyle,
  ListItemStyle,
  DateStyle,
  BackdropStyle,
  ConfirmDialogStyle,
  LoaderStyle,
} from "@cometchat/uikit-shared";

ConversationsStyle

conversationsStyle = new ConversationsStyle({
  width: "100%",
  height: "100%",
  border: "1px solid #e8e8e8",
  borderRadius: "8px",
  background: "#ffffff",
  titleTextFont: "600 18px Inter, sans-serif",
  titleTextColor: "#141414",
  lastMessageTextFont: "400 14px Inter, sans-serif",
  lastMessageTextColor: "#727272",
  typingIndictorTextColor: "#6851D6",
  onlineStatusColor: "#09C26F",
  privateGroupIconBackground: "#F76808",
  passwordGroupIconBackground: "#FFAB00",
});

<cometchat-conversations [conversationsStyle]="conversationsStyle"></cometchat-conversations>

MessageListStyle

messageListStyle = new MessageListStyle({
  width: "100%",
  height: "100%",
  background: "#fafafa",
  border: "none",
  // Bubble colors
  sendBubbleBackground: "#6851D6",
  sendBubbleTextColor: "#ffffff",
  sendBubbleTextFont: "400 15px Inter, sans-serif",
  receiveBubbleBackground: "#f0f0f0",
  receiveBubbleTextColor: "#141414",
  receiveBubbleTextFont: "400 15px Inter, sans-serif",
});

MessageComposerStyle

messageComposerStyle = new MessageComposerStyle({
  width: "100%",
  background: "#ffffff",
  border: "1px solid #e8e8e8",
  borderRadius: "0",
  inputBackground: "#f5f5f5",
  inputBorder: "none",
  inputBorderRadius: "8px",
  textFont: "400 15px Inter, sans-serif",
  textColor: "#141414",
  placeHolderTextColor: "#a1a1a1",
  sendIconTint: "#6851D6",
  attachmentIconTint: "#727272",
});

AvatarStyle

avatarStyle = new AvatarStyle({
  width: "40px",
  height: "40px",
  border: "none",
  borderRadius: "50%",
  backgroundColor: "#6851D6",
  nameTextColor: "#ffffff",
  nameTextFont: "600 16px Inter, sans-serif",
  backgroundSize: "cover",
});

BadgeStyle

badgeStyle = new BadgeStyle({
  background: "#6851D6",
  textColor: "#ffffff",
  textFont: "600 11px Inter, sans-serif",
  border: "none",
  borderRadius: "10px",
  width: "20px",
  height: "20px",
});

---

5. Common theming recipes

Match a brand color (most common)

// In AppComponent constructor:
themeService.theme.palette.setPrimary({ light: "#FF6B35", dark: "#FF8F66" });

This single call changes the outgoing message bubble color, send button, active tab indicator, and every primary accent in the UI.

Dark mode + custom brand

themeService.theme.palette.setMode("dark");
themeService.theme.palette.setPrimary({ light: "#6851D6", dark: "#A594F3" });
themeService.theme.palette.setBackground({ light: "#ffffff", dark: "#1a1a1a" });

Custom message bubble colors

messageListStyle = new MessageListStyle({
  sendBubbleBackground: "#FF6B35",
  sendBubbleTextColor: "#ffffff",
  receiveBubbleBackground: "#f0f0f0",
  receiveBubbleTextColor: "#1a1a1a",
});

Custom font across the whole UI

The Angular UI Kit reads font from CSS. Override via global styles:

/* styles.css (global) */
:root {
  --cometchat-font-family: "Inter", sans-serif;
}

Or pass textFont / titleTextFont in each component's style object.

---

6. CSS variable overrides

The Angular UI Kit exposes CSS custom properties for fine-grained control. Override in styles.css (global):

/* styles.css */
:root {
  /* Primary color */
  --cometchat-primary-color: #6851D6;

  /* Background colors */
  --cometchat-background-color-01: #ffffff;
  --cometchat-background-color-02: #fafafa;
  --cometchat-background-color-03: #f5f5f5;

  /* Text colors */
  --cometchat-text-color-primary: #141414;
  --cometchat-text-color-secondary: #727272;
  --cometchat-text-color-tertiary: #a1a1a1;

  /* Border */
  --cometchat-border-color-default: #e8e8e8;

  /* Font */
  --cometchat-font-family: "Inter", sans-serif;
}

CSS variable overrides apply globally and take effect immediately. Use them for app-wide changes that the CometChatThemeService palette methods don't cover.

---

7. Anti-patterns

1. 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.

2. *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.

3. 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.

4. 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.

5. 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.

---

Skill routing reference