feat: Add an option to use darkMode only in the widget (#7151)

app/javascript/widget/App.vue

@@ -2,6 +2,7 @@
   <div
     v-if="!conversationSize && isFetchingList"
     class="flex flex-1 items-center h-full bg-black-25 justify-center"
+    :class="{ dark: prefersDarkMode }"
   >
     <spinner size="" />
   </div>
@@ -13,6 +14,7 @@
       'is-widget-right': isRightAligned,
       'is-bubble-hidden': hideMessageBubble,
       'is-flat-design': isWidgetStyleFlat,
+      dark: prefersDarkMode,
     }"
   >
     <router-view />
@@ -65,6 +67,7 @@ export default {
       isFetchingList: 'conversation/getIsFetchingList',
       isRightAligned: 'appConfig/isRightAligned',
       isWidgetOpen: 'appConfig/getIsWidgetOpen',
+      darkMode: 'appConfig/darkMode',
       messageCount: 'conversation/getMessageCount',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
@@ -75,6 +78,12 @@ export default {
     isRNWebView() {
       return RNHelper.isRNWebView();
     },
+    prefersDarkMode() {
+      const isOSOnDarkMode =
+        this.darkMode === 'auto' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      return isOSOnDarkMode || this.darkMode === 'dark';
+    },
   },
   watch: {
     activeCampaign() {