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

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

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="chat-message--input"
-    :class="{ 'is-focused': isFocused }"
+    class="chat-message--input is-focused"
+    :class="$dm('bg-white ', 'dark:bg-slate-600')"
     @keydown.esc="hideEmojiPicker"
   >
     <resizable-text-area
@@ -10,7 +10,8 @@
       v-model="userInput"
       :aria-label="$t('CHAT_PLACEHOLDER')"
       :placeholder="$t('CHAT_PLACEHOLDER')"
-      class="form-input user-message-input"
+      class="form-input user-message-input is-focused"
+      :class="inputColor"
       @typing-off="onTypingOff"
       @typing-on="onTypingOn"
       @focus="onFocus"
@@ -19,6 +20,7 @@
     <div class="button-wrap">
       <chat-attachment-button
         v-if="showAttachment"
+        :class="$dm('text-black-900', 'dark:text-slate-100')"
         :on-attach="onSendAttachment"
       />
       <button
@@ -27,10 +29,7 @@
         aria-label="Emoji picker"
         @click="toggleEmojiPicker"
       >
-        <fluent-icon
-          icon="emoji"
-          :class="{ 'text-woot-500': showEmojiPicker }"
-        />
+        <fluent-icon icon="emoji" :class="emojiIconColor" />
       </button>
       <emoji-input
         v-if="showEmojiPicker"
@@ -57,6 +56,7 @@ import configMixin from '../mixins/configMixin';
 import EmojiInput from 'shared/components/emoji/EmojiInput';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
 import ResizableTextArea from 'shared/components/ResizableTextArea';
+import darkModeMixin from 'widget/mixins/darkModeMixin.js';
 
 export default {
   name: 'ChatInputWrap',
@@ -67,7 +67,7 @@ export default {
     FluentIcon,
     ResizableTextArea,
   },
-  mixins: [clickaway, configMixin],
+  mixins: [clickaway, configMixin, darkModeMixin],
   props: {
     onSendMessage: {
       type: Function,
@@ -98,6 +98,15 @@ export default {
     showSendButton() {
       return this.userInput.length > 0;
     },
+    inputColor() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')}
+        ${this.$dm('text-black-900', 'dark:text-slate-50')}`;
+    },
+    emojiIconColor() {
+      return this.showEmojiPicker
+        ? `text-woot-500 ${this.$dm('text-black-900', 'dark:text-slate-100')}`
+        : `${this.$dm('text-black-900', 'dark:text-slate-100')}`;
+    },
   },
   watch: {
     isWidgetOpen(isWidgetOpen) {