> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

## Overview

Theming in CometChat allows you to create visually consistent and customizable user interfaces that align with your application's branding. With the `CometChatTheme.DayNight` style which is built on `Theme.MaterialComponents.DayNight.NoActionBar` and acts as a global theme applied across all components, you can seamlessly integrate light and dark modes, define custom colors, typography, and component-specific styles, and enhance user experience across all CometChat components.

## Using Theming in Your Project

Set the `CometChatTheme.DayNight` as the parent theme for your application in the `themes.xml` file. You can extend it with your custom theme as needed:

```html theme={null}
<!-- themes.xml -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
   
</style>
```

In your AndroidManifest.xml file, set the theme for your application or activity:

```html theme={null}
<!-- AndroidManifest.xml -->
<application
    ...
    android:theme="@style/AppTheme">
    <!-- Other configurations -->
</application>
```

If you need to apply specific styles to a particular activity, override the theme as follows:

```html theme={null}
<!-- AndroidManifest.xml -->
<application
    ...
    >
    <!-- Other configurations -->

<activity
    android:name=".YourChatActivity"
    android:theme="@style/AppTheme">
</activity>

</application>
```

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/bhTrlIxYu6hfTewG/images/42da9194-introduction_theming_default-b29d82f803cd9092f10d0a72a35f4f62.png?fit=max&auto=format&n=bhTrlIxYu6hfTewG&q=85&s=815767c5005b38df17bb96e8a1f47dec" width="1440" height="833" data-path="images/42da9194-introduction_theming_default-b29d82f803cd9092f10d0a72a35f4f62.png" />
</Frame>

## Customization

To customize the primary color in your app, you can override the cometchatPrimaryColor attribute in your theme. Here's how:

```html theme={null}
<!-- themes.xml -->
<style name="AppTheme" parent="CometChatTheme.DayNight">

    <item name="cometchatPrimaryColor">#F76808</item>

</style>
```

To know more such attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/yDKVamMkf61gj3YR/images/e6e0caaf-introduction_theming_primary_change-b6047b7a97046c3abf385ff1fec54e5a.png?fit=max&auto=format&n=yDKVamMkf61gj3YR&q=85&s=7ec8d87e729be1a236d7afbab0884d8b" width="1440" height="833" data-path="images/e6e0caaf-introduction_theming_primary_change-b6047b7a97046c3abf385ff1fec54e5a.png" />
</Frame>