用途:教 Claude 为 CometChat Angular UI Kit v4 做主题定制,涉及调色板令牌、明暗模式切换、字体排版、组件级样式与预设主题。使用前需先阅读 cometchat-angular-core。
主要能力:预设主题:内置 slack、whatsapp、imessage、discord、notion 五套,可在 src/styles.scss 的 :root 中设置 --cometchat-primary-color、--cometchat-font-family、--cometchat-background-color-01、--cometchat-text-color-primary 应用,并同步调用 themeService.theme.palette.setPrimary()。
全局调色板:在 AppComponent 构造函数注入 CometChatThemeService,可在组件渲染前调用 setMode("light"|"dark")、setPrimary({light,dark})、setAccent、setBackground、setSecondary。切换模式即时生效,无需刷新。
组件级样式:从 @cometchat/uikit-shared 导入 ConversationsStyle、MessageListStyle、MessageComposerStyle、AvatarStyle、BadgeStyle 等,通过 [*Style] 输入传入。优先级为组件级 [*Style] 高于服务调色板,高于默认主题。
CSS 变量:在全局 styles.css 的 :root 覆盖 --cometchat-primary-color、--cometchat-background-color-01/02/03、--cometchat-text-color-primary/secondary/tertiary、--cometchat-border-color-default、--cometchat-font-family。
限制与注意事项:setMode 必须在构造函数调用,不可放 ngOnInit;不要对同一属性混用服务与 [*Style];样式对象避免使用非十六进制颜色;服务为单例,勿在懒加载模块中注入;调用 setPrimary/setAccent 时需同时提供明暗两种变体。文档未提供价格、平台或效果保证等信息。