feat: Support Dark mode for the widget (#4137)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/widget/components/ChatHeader.vue

@@ -1,8 +1,15 @@
 <template>
-  <header class="flex justify-between p-5 w-full">
+  <header
+    class="flex justify-between p-5 w-full"
+    :class="$dm('bg-white', 'dark:bg-slate-900')"
+  >
     <div class="flex items-center">
       <button v-if="showBackButton" @click="onBackButtonClick">
-        <fluent-icon icon="chevron-left" size="24" />
+        <fluent-icon
+          icon="chevron-left"
+          size="24"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        />
       </button>
       <img
         v-if="avatarUrl"
@@ -11,7 +18,10 @@
         alt="avatar"
       />
       <div>
-        <div class="text-black-900 font-medium text-base flex items-center">
+        <div
+          class="font-medium text-base flex items-center"
+          :class="$dm('text-black-900', 'dark:text-slate-50')"
+        >
           <span class="mr-1" v-html="title" />
           <div
             :class="
@@ -20,7 +30,10 @@
             "
           />
         </div>
-        <div class="text-xs mt-1 text-black-700">
+        <div
+          class="text-xs mt-1"
+          :class="$dm('text-black-700', 'dark:text-slate-400')"
+        >
           {{ replyWaitMessage }}
         </div>
       </div>
@@ -36,6 +49,7 @@ import availabilityMixin from 'widget/mixins/availability';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import HeaderActions from './HeaderActions';
 import routerMixin from 'widget/mixins/routerMixin';
+import darkMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'ChatHeader',
@@ -43,7 +57,7 @@ export default {
     FluentIcon,
     HeaderActions,
   },
-  mixins: [availabilityMixin, routerMixin],
+  mixins: [availabilityMixin, routerMixin, darkMixin],
   props: {
     avatarUrl: {
       type: String,
@@ -67,7 +81,9 @@ export default {
     },
   },
   computed: {
-    ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
+    ...mapGetters({
+      widgetColor: 'appConfig/getWidgetColor',
+    }),
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;