Theme

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

Vue

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");

Step2: Injecting and using the Theme within the component

info

App level providers to make it available in the entire application Component level providers to make it available in child components

App level providers

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

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

Component level providers

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