Color Resources - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`cometchat_chat_uikit`
Import	`import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';`
Purpose	Customize the CometChat Flutter UI Kit theme with palettes for light mode, dark mode, backgrounds, text, borders, icons, and buttons.
Key classes	`CometChatColorPalette`
Related	Theming In CometChat Flutter UI Kit V6 · Component Styling

Introducing CometChatColorPalette

The CometChatColorPalette class allows you to customize the colors used throughout your app. It works the same way in V6 as in V5 — you assign it to the extensions property of your ThemeData. Here’s what you can customize:

Primary Colors — Main color scheme of your app
Neutral Colors — Balanced base for visuals
Alert Colors — Informative, warning, success, and error messages
Background Colors — Background shades for different areas
Text Colors — Text element colors for readability
Border Colors — Borders for buttons and cards
Icon Colors — App icon colors
Button Colors — Button background and text colors
Shimmer Colors — Loading animation colors

Light Mode

Dart

ThemeData(
  extensions: [
    CometChatColorPalette(
      textSecondary: Color(0xFF727272),
      background1: Color(0xFFFFFFFF),
      textPrimary: Color(0xFF141414),
      borderLight: Color(0xFFF5F5F5),
      borderDark: Color(0xFFDCDCDC),
      iconSecondary: Color(0xFFA1A1A1),
      success: Color(0xFF09C26F),
      iconHighlight: Color(0xFF6852D6),
      extendedPrimary500: Color(0xFFAA9EE8),
      warning: Color(0xFFFAAB00),
      messageSeen: Color(0xFF56E8A7),
      neutral900: Color(0xFF141414),
      neutral600: Color(0xFF727272),
      neutral300: Color(0xFFE8E8E8),
      primary: Color(0xFF6852D6),
    ),
  ],
)

Dark Mode

Dart

ThemeData(
  extensions: [
    CometChatColorPalette(
      textSecondary: Color(0xFF989898),
      background1: Color(0xFF1A1A1A),
      textPrimary: Color(0xFFFFFFFF),
      borderLight: Color(0xFF272727),
      iconSecondary: Color(0xFF858585),
      success: Color(0xFF0B9F5D),
      iconHighlight: Color(0xFF6852D6),
      extendedPrimary500: Color(0xFF3E3180),
      warning: Color(0xFFD08D04),
      messageSeen: Color(0xFF56E8A7),
      neutral900: Color(0xFFFFFFFF),
      neutral600: Color(0xFF989898),
      neutral300: Color(0xFF383838),
      primary: Color(0xFF6852D6),
    ),
  ],
)

Custom Colors

Dart

ThemeData(
  extensions: [
    CometChatColorPalette(
      textSecondary: Color(0xFF727272),
      background1: Color(0xFFFFFFFF),
      textPrimary: Color(0xFF141414),
      borderLight: Color(0xFFF5F5F5),
      borderDark: Color(0xFFDCDCDC),
      iconSecondary: Color(0xFFA1A1A1),
      success: Color(0xFF09C26F),
      iconHighlight: Color(0xFFF76808),
      extendedPrimary500: Color(0xFFFBAA75),
      warning: Color(0xFFFAAB00),
      messageSeen: Color(0xFF56E8A7),
      neutral900: Color(0xFF141414),
      neutral600: Color(0xFF727272),
      neutral300: Color(0xFFE8E8E8),
      primary: Color(0xFFF76808),
    ),
  ],
)