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

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

<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

<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