Theme - CometChat Docs

Theme class provides endless number of customisations to improve or transform the look and feel of the UI Kit as per your application need. Learn more.

Usage

Step1: Provide theme to App

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

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

App Level Providers

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

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>

Injecting and using the Theme in components

Child Component

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

​Usage

Usage