After integrating the Vue Social Chat module into my Nuxt app, I am facing difficulties in understanding how to customize the props and color settings. Currently, everything is functioning properly, but the WhatsApp icon and top bar within the speech bubble are displayed in black. How can I change this in Nuxt? The author suggests using CSS variables, but I'm unsure about where to place them and how to implement them in my code.
Since Nuxt does not have an App.vue file, I directly imported the module, which seems to be working fine, but I'm uncertain if I'm doing it correctly.
This is what my current default.vue page looks like. I haven't imported the module anywhere else:
<template>
<v-app dark>
<v-main>
<Nuxt />
</v-main>
<div>
<SocialChat
icon
:attendants="attendants"
>
<p slot="header" >Chat with us on WhatsApp for any questions or topics related to sales.</p>
<template v-slot:button>
<img
src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
alt="WhatsApp icon"
aria-hidden="true"
>
</template>
<small slot="footer">Opening hours: 8am to 6pm</small>
</SocialChat>
</div>
</v-app>
</template>
<script>
import { SocialChat } from 'vue-social-chat'
export default {
name: 'DefaultLayout',
components: {
SocialChat
},
data() {
return {
attendants: [
{
app: 'whatsapp',
label: '',
name: '',
number: '',
avatar: {
src: '',
alt: ''
}
},
// ...
],
}
},
}
</script>
<style>
.container {
max-width: 1200px;
}
</style>