> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Resources

> Review and override the default UI Kit color palette for consistent light and dark mode styling.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                                                                                                              |
  | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | Kotlin XML Views | Colors defined in `res/values/color.xml` (light) and `res/values-night/color.xml` (dark), overridable via theme attributes or `CometChatTheme.set*()`              |
  | Jetpack Compose  | Colors provided via `lightColorScheme()` and `darkColorScheme()` factory functions, customizable via `.copy()`                                                     |
  | Key tokens       | `primary`, `backgroundColor1–4`, `textColorPrimary/Secondary/Tertiary`, `strokeColorDefault/Light/Dark`, `successColor`, `errorColor`, `warningColor`, `infoColor` |
  | Related          | [Theme Introduction](/ui-kit/android/v6/theme-introduction) · [Component Styling](/ui-kit/android/v6/component-styling)                                            |
</Accordion>

The UI Kit ships with a complete color palette for light and dark modes. This page documents the default values and how to override them.

***

## Color Categories

The palette is organized into these groups:

| Category   | Tokens                                                                                                                     | Purpose                                                   |
| ---------- | -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| Primary    | `primary`                                                                                                                  | Brand color for buttons, highlights, interactive elements |
| Neutral    | `neutral50` – `neutral900`                                                                                                 | Grayscale ramp for backgrounds, text, borders             |
| Alert      | `success`, `error`, `warning`, `info`, `messageRead`                                                                       | Status indicators                                         |
| Background | `backgroundColor1` – `backgroundColor4`                                                                                    | Surface/panel backgrounds (derived from neutrals)         |
| Stroke     | `strokeColorDefault`, `strokeColorLight`, `strokeColorDark`, `strokeColorHighlight`                                        | Borders and dividers                                      |
| Text       | `textColorPrimary`, `textColorSecondary`, `textColorTertiary`, `textColorDisabled`, `textColorWhite`, `textColorHighlight` | Typography colors                                         |
| Icon       | `iconTintPrimary`, `iconTintSecondary`, `iconTintTertiary`, `iconTintWhite`, `iconTintHighlight`                           | Icon tints                                                |
| Button     | `primaryButtonBackground`, `primaryButtonText`, `secondaryButtonBackground`, `secondaryButtonText`                         | Button colors                                             |

***

## Default Light Mode Palette

<Tabs>
  <Tab title="Kotlin (XML Views)">
    Defined in `chatuikit-kotlin/src/main/res/values/color.xml`:

    ```xml color.xml lines theme={null}
    <!-- Primary -->
    <color name="cometchat_color_primary">#6852D6</color>

    <!-- Neutral -->
    <color name="cometchat_color_neutral_50">#FFFFFF</color>
    <color name="cometchat_color_neutral_100">#FAFAFA</color>
    <color name="cometchat_color_neutral_200">#F5F5F5</color>
    <color name="cometchat_color_neutral_300">#E8E8E8</color>
    <color name="cometchat_color_neutral_400">#DCDCDC</color>
    <color name="cometchat_color_neutral_500">#A1A1A1</color>
    <color name="cometchat_color_neutral_600">#727272</color>
    <color name="cometchat_color_neutral_700">#5B5B5B</color>
    <color name="cometchat_color_neutral_800">#434343</color>
    <color name="cometchat_color_neutral_900">#141414</color>

    <!-- Alert -->
    <color name="cometchat_color_info">#0B7BEA</color>
    <color name="cometchat_color_success">#09C26F</color>
    <color name="cometchat_color_warning">#FFAB00</color>
    <color name="cometchat_color_error">#F44649</color>
    <color name="cometchat_color_message_read">#56E8A7</color>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    Provided by `lightColorScheme()` in `CometChatColorScheme.kt`:

    ```kotlin lines theme={null}
    import com.cometchat.uikit.compose.theme.lightColorScheme

    // Default light color scheme
    val colors = lightColorScheme()

    // Key defaults:
    // primary = Color(0xFF6852D6)
    // neutralColor50 = Color(0xFFFFFFFF)
    // neutralColor900 = Color(0xFF141414)
    // successColor = Color(0xFF09C26F)
    // errorColor = Color(0xFFF44649)
    // warningColor = Color(0xFFFFAB00)
    // infoColor = Color(0xFF0B7BEA)
    ```
  </Tab>
</Tabs>

***

## Default Dark Mode Palette

<Tabs>
  <Tab title="Kotlin (XML Views)">
    Defined in `chatuikit-kotlin/src/main/res/values-night/color.xml`. Note how neutral values are inverted:

    ```xml values-night/color.xml lines theme={null}
    <!-- Primary -->
    <color name="cometchat_color_primary">#6852D6</color>

    <!-- Neutral (inverted for dark mode) -->
    <color name="cometchat_color_neutral_50">#141414</color>
    <color name="cometchat_color_neutral_100">#1A1A1A</color>
    <color name="cometchat_color_neutral_200">#272727</color>
    <color name="cometchat_color_neutral_300">#383838</color>
    <color name="cometchat_color_neutral_400">#4C4C4C</color>
    <color name="cometchat_color_neutral_500">#858585</color>
    <color name="cometchat_color_neutral_600">#989898</color>
    <color name="cometchat_color_neutral_700">#A8A8A8</color>
    <color name="cometchat_color_neutral_800">#C8C8C8</color>
    <color name="cometchat_color_neutral_900">#FFFFFF</color>

    <!-- Alert -->
    <color name="cometchat_color_info">#0D66BF</color>
    <color name="cometchat_color_success">#0B9F5D</color>
    <color name="cometchat_color_warning">#D08D04</color>
    <color name="cometchat_color_error">#C73C3E</color>
    <color name="cometchat_color_message_read">#56E8A7</color>
    ```

    Android automatically uses `values-night` resources when the system is in dark mode.
  </Tab>

  <Tab title="Jetpack Compose">
    Provided by `darkColorScheme()`:

    ```kotlin lines theme={null}
    import com.cometchat.uikit.compose.theme.darkColorScheme

    // Default dark color scheme
    val colors = darkColorScheme()

    // Key defaults (neutrals inverted):
    // primary = Color(0xFF6852D6)
    // neutralColor50 = Color(0xFF141414)
    // neutralColor900 = Color(0xFFFFFFFF)
    // successColor = Color(0xFF0B9F5D)
    // errorColor = Color(0xFFC73C3E)
    ```
  </Tab>
</Tabs>

***

## Override Colors

<Tabs>
  <Tab title="Kotlin (XML Views)">
    Override via XML theme attributes in `themes.xml`:

    ```xml themes.xml lines theme={null}
    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatPrimaryColor">#F76808</item>
        <item name="cometchatBackgroundColor1">#FFFFFF</item>
        <item name="cometchatTextColorPrimary">#000000</item>
        <item name="cometchatStrokeColorDefault">#E0E0E0</item>
    </style>
    ```

    Or programmatically via `CometChatTheme`:

    ```kotlin lines theme={null}
    CometChatTheme.setPrimaryColor(Color.parseColor("#F76808"))
    CometChatTheme.setBackgroundColor1(Color.parseColor("#FFFFFF"))
    CometChatTheme.setTextColorPrimary(Color.parseColor("#000000"))
    CometChatTheme.setStrokeColorDefault(Color.parseColor("#E0E0E0"))
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    Customize via `.copy()` on the factory functions:

    ```kotlin lines theme={null}
    val customColors = lightColorScheme().copy(
        primary = Color(0xFFF76808),
        backgroundColor1 = Color(0xFFFFFFFF),
        textColorPrimary = Color(0xFF000000),
        strokeColorDefault = Color(0xFFE0E0E0)
    )

    CometChatTheme(colorScheme = customColors) {
        // Your content
    }
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-angular-v5-docs-update/7FrH1XBoyJH8fE7_/images/e6e0caaf-introduction_theming_primary_change-b6047b7a97046c3abf385ff1fec54e5a.png?fit=max&auto=format&n=7FrH1XBoyJH8fE7_&q=85&s=0f9eb730f49cfec8bc658dc0aa67075e" width="1440" height="833" data-path="images/e6e0caaf-introduction_theming_primary_change-b6047b7a97046c3abf385ff1fec54e5a.png" />
</Frame>

***

## Derived Colors

Background, stroke, text, and icon colors are derived from the neutral scale by default:

| Token                | Light Mode Default     | Dark Mode Default      |
| -------------------- | ---------------------- | ---------------------- |
| `backgroundColor1`   | `neutral50` (#FFFFFF)  | `neutral50` (#141414)  |
| `backgroundColor2`   | `neutral100` (#FAFAFA) | `neutral100` (#1A1A1A) |
| `textColorPrimary`   | `neutral900` (#141414) | `neutral900` (#FFFFFF) |
| `textColorSecondary` | `neutral600` (#727272) | `neutral600` (#989898) |
| `strokeColorDefault` | `neutral200` (#F5F5F5) | `neutral200` (#272727) |
| `strokeColorLight`   | `neutral300` (#E8E8E8) | `neutral300` (#383838) |
| `iconTintPrimary`    | `neutral900` (#141414) | `neutral900` (#FFFFFF) |
| `iconTintHighlight`  | `primary` (#6852D6)    | `primary` (#6852D6)    |

This means overriding a neutral color automatically updates all tokens that reference it.