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

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

app/javascript/widget/components/Form/TextArea.vue

@@ -1,21 +1,11 @@
 <template>
   <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs font-medium"
-      :class="{
-        'text-black-800': !error,
-        'text-red-400': error,
-      }"
-    >
+    <div v-if="label" class="mb-2 text-xs font-medium" :class="labelClass">
       {{ label }}
     </div>
     <textarea
       class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="{
-        'border-black-200 hover:border-black-300 focus:border-black-300': !error,
-        'border-red-200 hover:border-red-300 focus:border-red-300': error,
-      }"
+      :class="isTextAreaHasError"
       :placeholder="placeholder"
       :value="value"
       @change="onChange"
@@ -26,7 +16,9 @@
   </label>
 </template>
 <script>
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
+  mixins: [darkModeMixin],
   props: {
     label: {
       type: String,
@@ -49,6 +41,27 @@ export default {
       default: '',
     },
   },
+  computed: {
+    labelClass() {
+      return this.error
+        ? `text-red-400 ${this.$dm('text-black-800', 'dark:text-slate-50')}`
+        : `text-black-800 ${this.$dm('text-black-800', 'dark:text-slate-50')}`;
+    },
+    isTextAreaDarkOrLightMode() {
+      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
+        'text-slate-700',
+        'dark:text-slate-50'
+      )}`;
+    },
+    textAreaBorderColor() {
+      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+    },
+    isTextAreaHasError() {
+      return this.error
+        ? `border-red-200 hover:border-red-300 focus:border-red-300 ${this.isTextAreaDarkOrLightMode}`
+        : `hover:border-black-300 focus:border-black-300 ${this.isTextAreaDarkOrLightMode} ${this.textAreaBorderColor}`;
+    },
+  },
   methods: {
     onChange(event) {
       this.$emit('input', event.target.value);