J'ai installé le module de chat social Vue dans mon application Nuxt mais je n'arrive pas à comprendre comment fonctionnent les accessoires et les paramètres de couleur. Actuellement, tout fonctionne bien, même si l'icône Whatsapp affichée est noire et la barre supérieure se trouve à l'intérieur de la bulle. Comment puis-je modifier ce paramètre dans Nuxt. L'auteur dit d'utiliser des variables CSS mais je ne sais pas où mettre ces variables et comment les utiliser dans mon code.

Nuxt n'a pas non plus App.vue, j'ai donc importé le module directement, ce qui semble fonctionner, mais je ne suis pas sûr de le faire correctement.

Voici à quoi ressemble ma page default.vue actuelle. Je n'importerai pas ce module ailleurs.

<template>
  <v-app dark>
    <v-main>
      <Nuxt />
    </v-main>
    <div>
      <SocialChat
        icon
        :attendants="attendants"
      >
        <p slot="header" >Chat to us on whatsapp for any question, or sales related topics.</p>
        <template v-slot:button>
          <img
            src="https://raw.githubusercontent.com/ktquez/vue-social-chat/master/src/icons/whatsapp.svg"
            alt="icon whatsapp"
            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>