Skip to main content
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
  • 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
  • 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>
⌘I