feat: Support Dark mode for the widget (#4137)

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

app/javascript/sdk/IFrameHelper.js

@@ -145,6 +145,7 @@ export const IFrameHelper = {
         hideMessageBubble: window.$chatwoot.hideMessageBubble,
         showPopoutButton: window.$chatwoot.showPopoutButton,
         widgetStyle: window.$chatwoot.widgetStyle,
+        darkMode: window.$chatwoot.darkMode,
       });
       IFrameHelper.onLoad({
         widgetColor: message.config.channelConfig.widgetColor,

app/javascript/sdk/constants.js

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

app/javascript/sdk/settingsHelper.js

@@ -1,4 +1,4 @@
-import { BUBBLE_DESIGN, WIDGET_DESIGN } from './constants';
+import { BUBBLE_DESIGN, DARK_MODE, WIDGET_DESIGN } from './constants';
 
 export const getBubbleView = type =>
   BUBBLE_DESIGN.includes(type) ? type : BUBBLE_DESIGN[0];
@@ -9,3 +9,6 @@ export const getWidgetStyle = style =>
   WIDGET_DESIGN.includes(style) ? style : WIDGET_DESIGN[0];
 
 export const isFlatWidgetStyle = style => style === 'flat';
+
+export const getDarkMode = darkMode =>
+  DARK_MODE.includes(darkMode) ? darkMode : DARK_MODE[0];