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

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

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -1,11 +1,15 @@
 <template>
   <div
-    class="w-full h-full bg-slate-50 flex flex-col"
+    class="w-full h-full flex flex-col"
+    :class="$dm('bg-slate-50', 'dark:bg-slate-800')"
     @keydown.esc="closeWindow"
   >
     <div
-      class="header-wrap bg-white"
-      :class="{ expanded: !isHeaderCollapsed, collapsed: isHeaderCollapsed }"
+      class="header-wrap"
+      :class="{
+        expanded: !isHeaderCollapsed,
+        collapsed: isHeaderCollapsed,
+      }"
     >
       <transition
         enter-active-class="transition-all delay-200 duration-300 ease-in"
@@ -51,6 +55,7 @@ import Branding from 'shared/components/Branding.vue';
 import ChatHeader from '../ChatHeader.vue';
 import ChatHeaderExpanded from '../ChatHeaderExpanded.vue';
 import configMixin from '../../mixins/configMixin';
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 import { mapGetters } from 'vuex';
 import { IFrameHelper } from 'widget/helpers/utils';
 
@@ -61,7 +66,7 @@ export default {
     ChatHeader,
     ChatHeaderExpanded,
   },
-  mixins: [configMixin],
+  mixins: [configMixin, darkModeMixin],
   data() {
     return {
       showPopoutButton: false,