cometchat-flutter-v6-customization

Ground truth: theming is Flutter's own ThemeExtension mechanism — CometChatColorPalette, CometChatTypography, CometChatSpacing, all catalog-verified against 6.1.0. The exhaustive token list is FETCHED from the docs (theme-introduction · color-resources · component-styling · message-bubble-styling via ../cometchat-flutter-v6-core/references/docs-map.md) — do NOT bake it.

Companion skills (read first)

• cometchat-flutter-v6-core — install, credentials, init→login→render. This skill ASSUMES it.
• cometchat-flutter-v6-components — the widget catalog whose style objects and slots this skill sets.

Use this skill when

Branding or theming: colors, fonts, light/dark, or per-widget style overrides.

Prerequisites & install

Covered by core. No new package.

Customization mechanism (BAKED — v6)

Three tiers, in the order you should reach for them:

1. App-wide theme — ThemeExtension on your ThemeData. This is the main lever; it restyles every CometChat widget at once.

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

final cometchatLight = ThemeData(
  fontFamily: 'Inter',
  extensions: [
    CometChatColorPalette(primary: const Color(0xFFF76808)),
    CometChatTypography(),
    CometChatSpacing(),
  ],
);

2. Light / dark — Flutter's own switching, nothing CometChat-specific. Supply both themes and let themeMode decide; ThemeMode.system follows the OS, which is the right default for a fresh app.

import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
import 'package:flutter/material.dart';

Widget app(Widget home) => MaterialApp(
      theme: ThemeData(extensions: [CometChatColorPalette(primary: const Color(0xFFF76808))]),
      darkTheme: ThemeData.dark().copyWith(
        extensions: [CometChatColorPalette(primary: const Color(0xFFF76808))],
      ),
      themeMode: ThemeMode.system,   // follow the device setting
      home: home,
    );

Unlike the web kit (a theme prop + CSS variables), Flutter has no CometChat-specific mode switch — do not invent one. Register the palette on BOTH themes or dark mode falls back to defaults.