Color Resources

Complete reference for CometChatColorPalette tokens in Flutter UI Kit.

AI Agent Component Spec

Field	Value
Class	CometChatColorPalette
Usage	ThemeData(extensions: [CometChatColorPalette(...)])
Categories	Primary, Neutral, Alert, Text, Icon, Border, Background, Button, Shimmer
Light mode	Use light color values
Dark mode	Use dark color values
Source	GitHub

CometChatColorPalette controls all colors in the UI Kit. Apply it via ThemeData.extensions.

---

Complete Token Reference

Primary Colors

Token	Description
primary	Main accent color
extendedPrimary50	96% lighter (light) / 80% darker (dark)
extendedPrimary100	88% lighter (light) / 72% darker (dark)
extendedPrimary200	77% lighter (light) / 64% darker (dark)
extendedPrimary300	66% lighter (light) / 56% darker (dark)
extendedPrimary400	55% lighter (light) / 48% darker (dark)
extendedPrimary500	44% lighter (light) / 40% darker (dark)
extendedPrimary600	33% lighter (light) / 32% darker (dark)
extendedPrimary700	22% lighter (light) / 24% darker (dark)
extendedPrimary800	11% lighter (light) / 16% darker (dark)
extendedPrimary900	11% lighter (light) / 8% darker (dark)

Neutral Colors

Token	Description
neutral50 - neutral900	Surface and background shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900)

Alert Colors

Token	Description
info	Information indicator
warning	Warning indicator
error	Error indicator
success	Success indicator
error100	Light/dark mode error shade

Text Colors

Token	Description
textPrimary	Primary text
textSecondary	Secondary text
textTertiary	Tertiary text
textDisabled	Disabled text
textWhite	White text
textHighlight	Highlighted text

Icon Colors

Token	Description
iconPrimary	Primary icon
iconSecondary	Secondary icon
iconTertiary	Tertiary icon
iconWhite	White icon
iconHighlight	Highlighted icon

Border Colors

Token	Description
borderLight	Light border
borderDefault	Default border
borderDark	Dark border
borderHighlight	Highlighted border

Background Colors

Token	Description
background1	Primary background
background2	Secondary background
background3	Tertiary background
background4	Quaternary background

Button Colors

Token	Description
buttonBackground	Primary button background
secondaryButtonBackground	Secondary button background
buttonIconColor	Primary button icon
buttonText	Primary button text
secondaryButtonIcon	Secondary button icon
secondaryButtonText	Secondary button text

Other

Token	Description
shimmerBackground	Shimmer effect background
shimmerGradient	Shimmer effect gradient
messageSeen	Read receipt indicator
white	White color
black	Black color
transparent	Transparent color

---

Light Mode

Dart

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

---

Dark Mode

Dart

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

---

Custom Brand Colors

Dart

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