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

app/javascript/sdk/constants.js

@@ -1,3 +1,3 @@
 export const BUBBLE_DESIGN = ['standard', 'expanded_bubble'];
 export const WIDGET_DESIGN = ['standard', 'flat'];
-export const DARK_MODE = ['light', 'auto'];
+export const DARK_MODE = ['light', 'auto', 'dark'];

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() {

app/javascript/widget/components/ConversationWrap.vue

@@ -60,7 +60,7 @@ export default {
       isAgentTyping: 'conversation/getIsAgentTyping',
     }),
     colorSchemeClass() {
-      return `${this.darkMode === 'light' ? 'light' : 'dark'}`;
+      return `${this.darkMode === 'dark' ? 'dark-scheme' : 'light-scheme'}`;
     },
   },
   watch: {
@@ -117,10 +117,10 @@ export default {
   overflow-y: auto;
   color-scheme: light dark;
 
-  &.light {
+  &.light-scheme {
     color-scheme: light;
   }
-  &.dark {
+  &.dark-scheme {
     color-scheme: dark;
   }
 }

app/javascript/widget/mixins/darkModeMixin.js

@@ -9,6 +9,9 @@ export default {
       if (this.darkMode === 'light') {
         return light;
       }
+      if (this.darkMode === 'dark') {
+        return dark;
+      }
       return light + ' ' + dark;
     },
   },

tailwind.config.js

@@ -1,6 +1,7 @@
 const { colors } = require('tailwindcss/defaultTheme');
 
 module.exports = {
+  dark: 'class',
   purge: [
     './app/javascript/widget/**/*.vue',
     './app/javascript/portal/**/*.vue',
@@ -11,6 +12,9 @@ module.exports = {
   future: {
     removeDeprecatedGapUtilities: true,
   },
+  experimental: {
+    darkModeVariant: true,
+  },
   theme: {
     colors: {
       white: colors.white,