chore: Improvements to dark mode usage in widget (#7873)

app/javascript/widget/App.vue

@@ -41,7 +41,7 @@ import {
   ON_CAMPAIGN_MESSAGE_CLICK,
   ON_UNREAD_MESSAGE_CLICK,
 } from './constants/widgetBusEvents';
-
+import darkModeMixin from 'widget/mixins/darkModeMixin';
 import { SDK_SET_BUBBLE_VISIBILITY } from '../shared/constants/sharedFrameEvents';
 
 export default {
@@ -49,7 +49,7 @@ export default {
   components: {
     Spinner,
   },
-  mixins: [availabilityMixin, configMixin, routerMixin],
+  mixins: [availabilityMixin, configMixin, routerMixin, darkModeMixin],
   data() {
     return {
       isMobile: false,
@@ -67,7 +67,6 @@ export default {
       isFetchingList: 'conversation/getIsFetchingList',
       isRightAligned: 'appConfig/isRightAligned',
       isWidgetOpen: 'appConfig/getIsWidgetOpen',
-      darkMode: 'appConfig/darkMode',
       messageCount: 'conversation/getMessageCount',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
       isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
@@ -78,12 +77,6 @@ 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() {

app/javascript/widget/components/AgentMessageBubble.vue

@@ -9,8 +9,7 @@
     >
       <div
         v-dompurify-html="formatMessage(message, false)"
-        class="message-content"
+        class="message-content text-slate-900 dark:text-slate-50"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
       />
       <email-input
         v-if="isTemplateEmail"

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -46,7 +46,10 @@
     >
       <router-view />
     </transition>
-    <branding :disable-branding="disableBranding" />
+    <branding
+      class="bg-slate-25 dark:bg-slate-800"
+      :disable-branding="disableBranding"
+    />
   </div>
 </template>
 <script>