> ## 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.

`CometChatTheme` class is made up of two primary components such as:

1. **Palette**
2. **Typography**

***

### Palette

CometChatUIKit's palette is a predefined set of colors to provide a consistent and unified color scheme that can be used across various elements and components. It supports 2 specific color schemes i.e. light and dark

CometChatUIKit's palette primarily consists of four colors. It includes the background color, primary color, error color, accent color, and its variations of shades and tints.

| Mode  | Color code |
| ----- | ---------- |
| Light | #FFFFFF    |
| Dark  | #141414    |

| Color      | Description                                                                                                     | Color code in light mode | Color code in dark mode |
| ---------- | --------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------------------- |
| background | This is used as the background color for the main UI components.                                                | #FFFFFF                  | #141414                 |
| primary    | This is used to highlight or emphasize elements.                                                                | #3399FF                  | #3399FF                 |
| error      | This color is used for the destructive components/actions in components across UI Kit                           | #FF3B30                  | #FF3B30                 |
| accent     | This color is used as the background color to emphasize elements, but with less vibrance than the primary color | #141414                  | #FFFFFF                 |

| Accent colors | Opacity |
| ------------- | ------- |
| accent50      | 4%      |
| accent100     | 8%      |
| accent200     | 15%     |
| accent300     | 24%     |
| accent400     | 33%     |
| accent500     | 46%     |
| accent600     | 58%     |
| accent700     | 69%     |
| accent800     | 82%     |
| accent900     | 100%    |

| Primary colors | Opacity |
| -------------- | ------- |
| primary150     | 15%     |
| primary500     | 50%     |

***

### Typography

CometChatUIKit's typography encompasses the font family, font size and other typographic elements. All fonts used in UI Kit are pre-configured with the below values, but you can also customize it.

| Name        | Description                                                                                                           | Value |
| ----------- | --------------------------------------------------------------------------------------------------------------------- | ----- |
| Font family | This accepts a prioritized list of one or more font family names and/or generic family names for the selected element | Inter |

| Name               | Value |
| ------------------ | ----- |
| fontWeightRegular  | 400   |
| fontWeightMedium   | 500   |
| fontWeightSemibold | 600   |
| fontWeightBold     | 700   |

| Typography | Font family | Size | Weight             |
| ---------- | ----------- | ---- | ------------------ |
| Heading    | Inter       | 22px | fontWeightBold     |
| Name       | Inter       | 16px | fontWeightMedium   |
| Title1     | Inter       | 22px | fontWeightRegular  |
| Title2     | Inter       | 15px | fontWeightSemibold |
| Subtitle1  | Inter       | 15px | fontWeightRegular  |
| Subtitle2  | Inter       | 13px | fontWeightRegular  |
| Text1      | Inter       | 17px | fontWeightRegular  |
| Text2      | Inter       | 15px | fontWeightMedium   |
| Text3      | Inter       | 13px | fontWeightMedium   |
| Caption1   | Inter       | 12px | fontWeightMedium   |
| Caption2   | Inter       | 11px | fontWeightMedium   |
| Caption3   | Inter       | 8px  | fontWeightRegular  |

***

#### Usage

Step1: Provide theme to App

<Tabs>
  <Tab title="Vue">
    ```javascript theme={null}
    import { createApp } from "vue"; import App from "./App.vue"; const app =
    createApp(App); //App level provider makes the provided value available across
    the application via inject app.provide("theme", new CometChatTheme({}));
    app.mount("#app");
    ```
  </Tab>
</Tabs>

Step2: Injecting and using the Theme within the component

<Note>
  App level providers to make it available in the entire application Component level providers to make it available in child components
</Note>

<Tabs>
  <Tab title="App level providers">
    ```typescript theme={null}
    <script lang="ts">
    import { defineComponent, inject, provide } from "vue";

    export default defineComponent({
      setup() {
        //Inject the Theme in the component to be used
        //A default value can be provided as a fallback while injecting
        let injectedTheme = inject("theme", DefaultThemeObject);

        //using the theme
        let defaultStyle: CallButtonsStyle = new CallButtonsStyle({
          voiceCallIconTint: injectedTheme.palette.getPrimary(),
          videoCallIconTint: injectedTheme.palette.getPrimary(),
          voiceCallIconTextColor: injectedTheme.palette.getPrimary(),
          videoCallIconTextColor: injectedTheme.palette.getPrimary(),
        });

        return {};
      },
    });
    </script>
    ```
  </Tab>
</Tabs>

Theme can also be provided within a component but this will only be available to be injected in the child components

<Tabs>
  <Tab title="Component level providers">
    ```typescript theme={null}
    <script lang="ts">
    import { CometChatTheme } from "uikit-resources-lerna";
    import { defineComponent, provide } from "vue";

    export default defineComponent({
      setup() {
        //Make the theme available to child components by providing it in a parent component
        provide("theme", new CometChatTheme({}));

        return {};
      },
    });
    </script>
    ```
  </Tab>
</Tabs>