Theme

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

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

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