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

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

app/javascript/widget/components/HeaderActions.vue

@@ -6,14 +6,22 @@
       :title="$t('END_CONVERSATION')"
       @click="resolveConversation"
     >
-      <fluent-icon icon="sign-out" size="22" class="text-black-900" />
+      <fluent-icon
+        icon="sign-out"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
     </button>
     <button
       v-if="showPopoutButton"
       class="button transparent compact new-window--button "
       @click="popoutWindow"
     >
-      <fluent-icon icon="open" size="22" class="text-black-900" />
+      <fluent-icon
+        icon="open"
+        size="22"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
     </button>
     <button
       class="button transparent compact close-button"
@@ -22,7 +30,11 @@
       }"
       @click="closeWindow"
     >
-      <fluent-icon icon="dismiss" size="24" class="text-black-900" />
+      <fluent-icon
+        icon="dismiss"
+        size="24"
+        :class="$dm('text-black-900', 'dark:text-slate-50')"
+      />
     </button>
   </div>
 </template>
@@ -31,10 +43,12 @@ import { mapGetters } from 'vuex';
 import { IFrameHelper, RNHelper } from 'widget/helpers/utils';
 import { popoutChatWindow } from '../helpers/popoutHelper';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'HeaderActions',
   components: { FluentIcon },
+  mixins: [darkModeMixin],
   props: {
     showPopoutButton: {
       type: Boolean,