Guide Overview
Language/Framework: Vue UI Kit
This guide explains how to create a custom theme and apply it to your entire app, as well as how to change the text color of messages to match your theme.
UI Kit Version:
"@cometchat/chat-uikit-vue": "^4.3.14",
1. Your Custom component (ChatComponent.Vue)
<script lang="ts">
import { CometChatUIKit, CometChatConversationsWithMessages } from "@cometchat/chat-uikit-vue";
import {MessagesConfiguration,MessageListConfiguration} from "@cometchat/uikit-shared"
import {CometChatTheme,CometChatPalette} from "@cometchat/uikit-resources"
const loggedInUser = ref<CometChat.User | undefined>(undefined);
export default {
name: 'App',
components: { CometChatConversationsWithMessages },
setup() {
const getTemplates=()=>{
const defaultMessageTemplate= CometChatUIKit.getDataSource().getAllMessageTemplates(new CometChatTheme({}));
defaultMessageTemplate.forEach((template)=>{
if(template.category==="message" && template.type==="text"){
template.contentView=(messageObject:any,alignment:any)=>CometChatUIKit.getDataSource().getTextMessageContentView(messageObject,alignment,new CometChatTheme({
palette:new CometChatPalette({
mode:"light",
primary:{
light:'white'
},
accent:{
light:'#5e65e9aa'
}
})
}),{})
}
})
return defaultMessageTemplate;
}
const messagesConfiguration=()=>{
return new MessagesConfiguration({
messageListConfiguration: new MessageListConfiguration({
templates: getTemplates()
})
})
}
return { messagesConfiguration };
},
};
</script>
<template>
<div style="height: 700px; width: 100vw" >
<CometChatConversationsWithMessages :messages-configuration="messagesConfiguration()"/>
</div>
</template>
<style scoped>
</style>
2. Import ChatComponent in your App.vue
Your Main.ts file should look like-
// src/main.ts
import { createApp, ref } from 'vue';
import "@cometchat/chat-uikit-vue/dist/style.css";
import './style.css';
import App from './App.vue';
import { UIKitSettingsBuilder } from '@cometchat/uikit-shared';
import {CometChatTheme,CometChatPalette} from "@cometchat/uikit-resources"
import { APP_CONSTANT } from '../AppConstants';
import {CometChatTypography,CometChatFont } from "@cometchat/uikit-resources";
import { CometChatUIKit } from '@cometchat/chat-uikit-vue';
const UIKitSetting = new UIKitSettingsBuilder()
.setAppId(APP_CONSTANT.APP_ID)
.setRegion(APP_CONSTANT.REGION)
.setAuthKey(APP_CONSTANT.AUTH_KEY)
.subscribePresenceForAllUsers()
.build();
const theme: any = ref(
new CometChatTheme({
typography: new CometChatTypography({
// conversation listItem Title
title2:new CometChatFont({
fontSize:'12px',
fontFamily:'Times New Roman'
})
}),
palette: new CometChatPalette({
primary: {
light: "#5e65e9aa",
},
secondary: {
light: "whitesmoke",
},
}),
})
);
CometChatUIKit.init(UIKitSetting)?.then(() => {
function switchThemeMode() {
if (theme.value.palette.mode == "dark") {
theme.value.palette.setMode("light");
} else {
theme.value.palette.setMode("dark");
}
}
console.log("UIKIT Initialization Done");
const app = createApp(App);
app.provide("theme", {theme,switchThemeMode});
app.mount('#app');
});
// make sure to add the following import
// import "@cometchat/chat-uikit-vue/dist/style.css";
You can also refer to this documentation for more insights about the palette and typography of the CometChatTheme.
Note-
- Ensure that the UIKit is initialized properly and the user is logged in before using any CometChat SDK/UIKit methods or any UIKit component.