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

# Theme

> Theme — CometChat documentation.

## Overview

The Theme is a style applied to every component of CometChat. When a style is applied as a theme, every view in the activity or every component in the UiKit will apply each property of the theme that it supports.

CometChat theme comprises two key components: Palette and Typography.

**Palette**: The Palette can be used to customize the color scheme of the CometChat theme, including background color, primary and secondary colors, error color, and various levels of accent colors.

**Typography**: Typography, which is also a singleton class, encompasses all the default Text Style's values. It allows you to customize the text appearances throughout the CometChat theme, such as heading, name, titles, subtitles, text, and captions.

## Usage

### **Palette**

The CometChat UI kit provides an easy way to customize the visual appearance of your chat application via the Palette class. This class contains several methods that allow you to modify the default color scheme of your app, imparting a unique look and feel that aligns with your branding or design guidelines.

Here's an overview of the different methods available in the Palette class:

| Props                                                 | Description                          |
| ----------------------------------------------------- | ------------------------------------ |
| **setBackground(\{"light": string, "dark": string})** | Change the default background colour |
| **setPrimary(\{"light": string, "dark": string})**    | Change the default primary colour    |
| **secondary(\{"light": string, "dark": string})**     | Change the default secondary colour  |
| **setError(\{"light": string, "dark": string})**      | Change the default error colour      |
| **setAccent(\{"light": string, "dark": string})**     | Change the default accent colour     |
| **setAccent50(\{"light": string, "dark": string})**   | Change the default accent50 colour   |
| **setAccent100(\{"light": string, "dark": string})**  | Change the default accent100 colour  |
| **setAccent200(\{"light": string, "dark": string})**  | Change the default accent200 colour  |
| **setAccent300(\{"light": string, "dark": string})**  | Change the default accent300 colour  |
| **setAccent400(\{"light": string, "dark": string})**  | Change the default accent400 colour  |
| **setAccent500(\{"light": string, "dark": string})**  | Change the default accent500 colour  |
| **setAccent600(\{"light": string, "dark": string})**  | Change the default accent600 colour  |
| **setAccent700(\{"light": string, "dark": string})**  | Change the default accent700 colour  |
| **setAccent800(\{"light": string, "dark": string})**  | Change the default accent800 colour  |
| **setAccent900(\{"light": string, "dark": string})**  | Change the default accent900 colour  |

**Example**

To match the theme of your app you will need to set primary , secondary and accent color using Pallate.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/_MYSdWhXnUkTkjEH/images/4a0c020c-theme_primary_cometchat_screens-5ace2ef1c9b6e3441b2ca4b08773906a.png?fit=max&auto=format&n=_MYSdWhXnUkTkjEH&q=85&s=3b859489f2006ebfa3a8312423df9adb" alt="Image" width="4498" height="3120" data-path="images/4a0c020c-theme_primary_cometchat_screens-5ace2ef1c9b6e3441b2ca4b08773906a.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PrOf0fpV33FkfOMB/images/1624dafb-theme_primary_cometchat_screens-9fbae099d784df6d48f13cdc05a52b5f.png?fit=max&auto=format&n=PrOf0fpV33FkfOMB&q=85&s=2b4b6ec3c0b055f685ece62066164d0f" alt="Image" width="4498" height="3120" data-path="images/1624dafb-theme_primary_cometchat_screens-9fbae099d784df6d48f13cdc05a52b5f.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="Configure Theme">
    ```js theme={null}
    // initialize Palette class
    let myTheme: CometChatTheme = new CometChatTheme({});
    myTheme.palette.setPrimary({
      light: "#YourPrimaryColorForLighMode",
      dark: "#YourPrimaryColorForDarkMode",
    });
    myTheme.palette.setSecondary({
      light: "#YourSecondaryColorForLighMode",
      dark: "#YourSecondaryColorForDarkMode",
    });
    myTheme.palette.setAccent({
      light: "#YourAccentColorForLighMode",
      dark: "#YourAccentColorForDarkMode",
    });
    ```
  </Tab>

  <Tab title="JSX">
    ```jsx theme={null}
    // initialize Palette class
    return (
      <>
        <CometChatContextProvider theme={myTheme}>
          <CometChatConversationsWithMessages />
        </CometChatContextProvider>
      </>
    );
    ```
  </Tab>
</Tabs>

Switching between Light and Dark modes in CometChat is quite simple by manipulating the mode property of the Palette class.

<Tabs>
  <Tab title="iOS">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1ca5b84e-theme_dark_mode_cometchat_screens-523c0ec68bd1387ca4efd068103efffc.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=cf20de1df524777a0c3bcb7f794a30d3" alt="Image" width="4498" height="3120" data-path="images/1ca5b84e-theme_dark_mode_cometchat_screens-523c0ec68bd1387ca4efd068103efffc.png" />
  </Tab>

  <Tab title="Android">
    <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/JSRiWiPGBHsJZFCg/images/a0351fe2-theme_dark_mode_cometchat_screens-ed6189e837843d620d591af6791e24ca.png?fit=max&auto=format&n=JSRiWiPGBHsJZFCg&q=85&s=5d283af6146083b558167f548ce25935" alt="Image" width="4498" height="3120" data-path="images/a0351fe2-theme_dark_mode_cometchat_screens-ed6189e837843d620d591af6791e24ca.png" />
  </Tab>
</Tabs>

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    let myTheme: CometChatTheme = new CometChatTheme({});
    myTheme.palette.setMode("dark");
    ```
  </Tab>
</Tabs>

### **Typography**

The Typography class provides methods that allow you to change the default text styles in the CometChat theme as per your requirements.

Here are some of the methods provided by the Typography class:

| Props                   | Description                                |
| ----------------------- | ------------------------------------------ |
| setHeading(FontStyle)   | Use to set **Heading** text font style.    |
| setName(FontStyle)      | Use to set **Name** text font style.       |
| setTitle1(FontStyle)    | Use to set **Title 1** text font style.    |
| setTitle2(FontStyle)    | Use to set **Title 2** text font style.    |
| setSubtitle1(FontStyle) | Use to set **Subtitle 1** text font style. |
| setSubtitle2(FontStyle) | Use to set **Subtitle 2** text font style. |
| setText1(FontStyle)     | Use to set **Text 1** text font style.     |
| setText2(FontStyle)     | Use to set **Text 2** text font style.     |
| setCaption1(FontStyle)  | Use to set **Caption 1** text font style.  |
| setCaption2(FontStyle)  | Use to set **Caption 2** text font style.  |

To change Name TextStyle of the UiKit Theme Please refer to the code below :

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    let myTheme: CometChatTheme = new CometChatTheme({});
    myTheme.typography.setName({ fontSize: 22, fontWeight: "800" });
    ```
  </Tab>
</Tabs>

<Note>
  info

  Similarly, to change other Text Styles for the Theme, you can refer to the above mentioned methods.
</Note>