Add dark theme support

Author: muhsin-k

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017-2021 Chatwoot Inc.
+Copyright (c) 2017-2023 Chatwoot Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

index.d.ts

@@ -5,6 +5,7 @@ declare module '@chatwoot/react-native-widget' {
     websiteToken: string;
     locale?: string;
     baseUrl: string;
+    darkMode?: string;
     closeModal: () => void;
     isModalVisible: boolean;
     user?: {
@@ -21,4 +22,3 @@ declare module '@chatwoot/react-native-widget' {
   class ChatWootWidget extends React.Component<ChatWootWidgetProps, any> {}
   export default ChatWootWidget;
 }
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatwoot/react-native-widget",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "React Native widget for Chatwoot",
   "main": "index.js",
    "scripts": {

src/App.js

@@ -19,6 +19,7 @@ const propTypes = {
     identifier_hash: PropTypes.string,
   }),
   locale: PropTypes.string,
+  darkMode: PropTypes.string,
   customAttributes: PropTypes.shape({}),
   closeModal: PropTypes.func,
 };
@@ -27,6 +28,7 @@ const defaultProps = {
   cwCookie: '',
   user: {},
   locale: 'en',
+  darkMode: 'light',
   customAttributes: {},
 };
 
@@ -36,6 +38,7 @@ const ChatWootWidget = ({
   websiteToken,
   user,
   locale,
+  darkMode,
   customAttributes,
   closeModal,
 }) => {
@@ -55,8 +58,7 @@ const ChatWootWidget = ({
       isVisible={isModalVisible}
       onBackButtonPress={closeModal}
       onBackdropPress={closeModal}
-      style={styles.modal}
-    >
+      style={styles.modal}>
       <SafeAreaView style={styles.headerView} />
       <SafeAreaView style={styles.mainView}>
         <WebView
@@ -65,6 +67,7 @@ const ChatWootWidget = ({
           user={user}
           baseUrl={baseUrl}
           locale={locale}
+          darkMode={darkMode}
           customAttributes={customAttributes}
           closeModal={closeModal}
         />

src/WebView.js

@@ -7,6 +7,7 @@ const propTypes = {
   websiteToken: PropTypes.string.isRequired,
   baseUrl: PropTypes.string.isRequired,
   cwCookie: PropTypes.string,
+  darkMode: PropTypes.string,
   user: PropTypes.shape({
     name: PropTypes.string,
     avatar_url: PropTypes.string,
@@ -23,13 +24,15 @@ const defaultProps = {
   user: {},
   locale: 'en',
   customAttributes: {},
+  darkMode: 'light',
 };
 
 const WebViewComponent = ({
   baseUrl,
   websiteToken,
   cwCookie,
   locale,
+  darkMode,
   user,
   customAttributes,
   closeModal,
@@ -43,6 +46,7 @@ const WebViewComponent = ({
     user,
     locale,
     customAttributes,
+    darkMode,
   });
 
   const onShouldStartLoadWithRequest = (request) => {

src/constants.js

@@ -3,6 +3,7 @@ export const POST_MESSAGE_EVENTS = {
   SET_LOCALE: 'set-locale',
   SET_CUSTOM_ATTRIBUTES: 'set-custom-attributes',
   SET_USER: 'set-user',
+  SET_DARK_MODE: 'set-dark-mode',
 };
 export const BG_COLOR = '#f1f5f8';
 export const COLOR_WHITE = '#fff';

src/utils.js

@@ -19,7 +19,7 @@ export const createWootPostMessage = (object) => {
 
 export const getMessage = (data) => data.replace(WOOT_PREFIX, '');
 
-export const generateScripts = ({ user, locale, customAttributes }) => {
+export const generateScripts = ({ darkMode, user, locale, customAttributes }) => {
   let script = '';
   if (user) {
     const userObject = {
@@ -40,6 +40,10 @@ export const generateScripts = ({ user, locale, customAttributes }) => {
     };
     script += createWootPostMessage(attributeObject);
   }
+  if (darkMode) {
+    const darkModeObject = { event: POST_MESSAGE_EVENTS.SET_DARK_MODE, darkMode };
+    script += createWootPostMessage(darkModeObject);
+  }
   return script;
 };
 export const storeHelper = {