Color Resources

Customize the CometChat Flutter UI Kit theme with palettes for light mode, dark mode, backgrounds, text, borders, icons, and buttons.

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),
    ),
  ],
)