From 8d43101892c3138b9a33c20d1b67590c5472469a Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 11 Sep 2023 09:31:11 +0530
Subject: [PATCH] chore: Improvements to dark mode usage in widget (#7873)

---
 app/javascript/widget/App.vue                         | 11 ++---------
 .../widget/components/AgentMessageBubble.vue          |  3 +--
 .../widget/components/layouts/ViewWithHeader.vue      |  5 ++++-
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
index d8a809d5d..3c218266a 100755
--- a/app/javascript/widget/App.vue
+++ b/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() {
diff --git a/app/javascript/widget/components/AgentMessageBubble.vue b/app/javascript/widget/components/AgentMessageBubble.vue
index 04b0808e5..b205223e7 100755
--- a/app/javascript/widget/components/AgentMessageBubble.vue
+++ b/app/javascript/widget/components/AgentMessageBubble.vue
@@ -9,8 +9,7 @@
     >
       <div
         v-dompurify-html="formatMessage(message, false)"
-        class="message-content"
-        :class="$dm('text-black-900', 'dark:text-slate-50')"
+        class="message-content text-slate-900 dark:text-slate-50"
       />
       <email-input
         v-if="isTemplateEmail"
diff --git a/app/javascript/widget/components/layouts/ViewWithHeader.vue b/app/javascript/widget/components/layouts/ViewWithHeader.vue
index ec7cbe455..0751fd985 100644
--- a/app/javascript/widget/components/layouts/ViewWithHeader.vue
+++ b/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>