feat: Add support for dark mode in dashboard (#7460)

- Add config for TailwindCSS
- Enable HMR
- Add a config in LocalStorage for Dark Mode

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

app/javascript/dashboard/App.vue

@@ -3,7 +3,8 @@
     v-if="!authUIFlags.isFetching"
     id="app"
     class="app-wrapper app-root"
-    :class="{ 'app-rtl--wrapper': isRTLView }"
+    :class="{ 'app-rtl--wrapper': isRTLView, dark: theme === 'dark' }"
+    :dir="isRTLView ? 'rtl' : 'ltr'"
   >
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <template v-if="!accountUIFlags.isFetchingItem && currentAccountId">
@@ -34,10 +35,12 @@ import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer';
 import rtlMixin from 'shared/mixins/rtlMixin';
+import { LocalStorage } from 'shared/helpers/localStorage';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
 } from './helper/pushHelper';
+import { LOCAL_STORAGE_KEYS } from './constants/localStorage';
 
 export default {
   name: 'App',
@@ -58,6 +61,7 @@ export default {
     return {
       showAddAccountModal: false,
       latestChatwootVersion: null,
+      theme: 'light',
     };
   },
 
@@ -89,9 +93,34 @@ export default {
     },
   },
   mounted() {
+    this.initializeColorTheme();
+    this.listenToThemeChanges();
     this.setLocale(window.chatwootConfig.selectedLocale);
   },
   methods: {
+    initializeColorTheme() {
+      this.setColorTheme(
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+      );
+    },
+    setColorTheme(isOSOnDarkMode) {
+      const selectedColorScheme =
+        LocalStorage.get(LOCAL_STORAGE_KEYS.COLOR_SCHEME) || 'light';
+      if (
+        (selectedColorScheme === 'auto' && isOSOnDarkMode) ||
+        selectedColorScheme === 'dark'
+      ) {
+        this.theme = 'dark';
+        document.body.classList.add('dark');
+      } else {
+        this.theme = 'light ';
+        document.body.classList.remove('dark');
+      }
+    },
+    listenToThemeChanges() {
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+      mql.onchange = e => this.setColorTheme(e.matches);
+    },
     setLocale(locale) {
       this.$root.$i18n.locale = locale;
     },